我在 stackoverflow 上问了一个 Question，有人将我的代码放入 CodePen 中，并注意到它工作正常，就像我想要的那样，但每当我在 VS Code 中运行相同的代码时，它就不起作用。我不明白为什么代码不能在 VS Code 中工作，而在 CodePen 中不能完全按照我想要的方式工作。我还尝试在正文结束标记之前的代码底部添加 JS 编码，但没有任何效果。以下代码在 VS Code 中不起作用，但在 CodePen 中起作用：
/*Lower Side*/
.lowerside{
margin-top: 38.3%;
width: 100%;
box-sizing: border-box;
background-color: #F0F2F5;
min-height: 200vh;
position: relative;
}
/*Left Side*/
.lowerside-left{
width: 360px;
top: 5%;
margin-left: 17%;
margin-bottom: 0.5%;
margin-top: -6%;
border-radius: 8px;
display: block;
background-color: white;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 1px 2px 0px rgb(0, 0, 0, 0.2);
position: absolute;
}
/*Left Side Text*/
.lowerside-left-text{
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
padding: 10px 16px 4px;
position: relative;
}
/*Left Side Icon*/
.lowerside-left-icon{
padding: 5px 16px 4px;
position: relative;
border: none;
border-radius: 0;
}
/*Hide Extra long text*/
.text-preview{
display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
-webkit-box-orient: vertical;
}
/*Height after full text*/
.lowerside-left-fulltext{
height: 410px;
}
/*See More*/
.seemore{
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
overflow: visible;
position: absolute;
}
.seemore:hover{
cursor: pointer;
text-decoration: underline;
}
/*See Less*/
.seeless{
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
position: absolute;
}
.seeless:hover{
cursor: pointer;
text-decoration: underline;
}
/*Right Side*/
.lowerside-right{
width: 480px;
top: 5%;
margin-left: 47%;
margin-bottom: 0.5%;
margin-top: -6%;
border-radius: 8px;
display: block;
background-color: white;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 1px 2px 0px rgb(0, 0, 0, 0.2);
position: absolute;
}
<!--Lower Side-->
<div class="lowerside">
<!--Left Side-->
<div class="lowerside-left" id="about-section">
<!--Left Side Text-->
<h3 class="lowerside-left-text" style="font-weight: bolder;">About</h3>
<p class="lowerside-left-text" style="color:#216fdb; font-size: small; font-weight:light; padding-left: 85%; margin-top: -14%;cursor: pointer;">See all</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="I icon.png">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">The Facebook app Page celebrates how our friends inspire us, support us, and help us discover the world when we connect.</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="I icon.png">
<p class="lowerside-left-text text-preview" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">Community Values<br>
We believe people can do more together than alone and that each of us plays an important role in helping to create a safe and respectful community. So, we’ve laid out a set of principles for us to follow on this Page:<br><br>
Let’s celebrate the things that bring us together.<br><br>
Let’s choose to treat each other like neighbors rather than strangers.<br><br>
Let’s respect individuality and welcome diverse backgrounds and perspectives.<br><br>
Let’s assume people mean well.<br><br>
Our moderators are here for the community to uphold these values every day.</p>
<!--See More-->
<span class="seemore" onclick="toggleOverflow()" style="left: 13%; bottom: 43%;">See more</span> <span class="seeless" onclick="toggleOverflow()" style="display: none; left: 13%">See less</span><!--See Less-->
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="black_like.png" style="bottom: -13px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -7%;">183,205,742 people like this</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="follow.png" style="margin-top: -6px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">188,661,607 people follow this</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="check.png" style="margin-top: -6px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">118 people checked in here</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="World.png" style="margin-top: -6px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;"><a href="Link" style="color: #216fdb; text-decoration: none;">Link</a></p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" style="margin-top: -6px; margin-left: 15px; background-image: url(file.png); background-repeat: no-repeat; background-position: 0px -300px; filter: contrast(0); height: 20px; width: 20px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -9%;"><a href="https://www.facebook.com/pages/category/internet-company" style="color: #216fdb; text-decoration: none;">Internet Company</a></p>
</div>
<!-- </div> -->
function toggleOverflow() {
var paragraph = document.querySelector('.lowerside-left-text.text-preview');
var seeMore = document.querySelector('.seemore');
var seeLess = document.querySelector('.seeless');
if (paragraph.classList.contains('lowerside-left-fulltext')) {
// If the text is in full view, clicking "See more" should show truncated text
paragraph.classList.remove('lowerside-left-fulltext');
seeMore.style.display = 'block';
seeLess.style.display = 'none';
} else {
// If the text is truncated, clicking "See more" should show the full text
paragraph.classList.add('lowerside-left-fulltext');
seeMore.style.display = 'none';
seeLess.style.display = 'block';
}
}
我希望这段代码能够在 VS Code 中工作，就像在 CodePen 中一样。
它适用于 Codepen，因为它们已经隐藏了 HTML 标头和元标记。
要在 VSCode 上工作，您需要创建如下：
function toggleOverflow() {
var paragraph = document.querySelector('.lowerside-left-text.text-preview');
var seeMore = document.querySelector('.seemore');
var seeLess = document.querySelector('.seeless');
if (paragraph.classList.contains('lowerside-left-fulltext')) {
// If the text is in full view, clicking "See more" should show truncated text
paragraph.classList.remove('lowerside-left-fulltext');
seeMore.style.display = 'block';
seeLess.style.display = 'none';
} else {
// If the text is truncated, clicking "See more" should show the full text
paragraph.classList.add('lowerside-left-fulltext');
seeMore.style.display = 'none';
seeLess.style.display = 'block';
}
} .lowerside {
margin-top: 38.3%;
width: 100%;
box-sizing: border-box;
background-color: #F0F2F5;
min-height: 200vh;
position: relative;
}
/*Left Side*/
.lowerside-left {
width: 360px;
top: 5%;
margin-left: 17%;
margin-bottom: 0.5%;
margin-top: -6%;
border-radius: 8px;
display: block;
background-color: white;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 1px 2px 0px rgb(0, 0, 0, 0.2);
position: absolute;
}
/*Left Side Text*/
.lowerside-left-text {
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
padding: 10px 16px 4px;
position: relative;
}
/*Left Side Icon*/
.lowerside-left-icon {
padding: 5px 16px 4px;
position: relative;
border: none;
border-radius: 0;
}
/*Hide Extra long text*/
.text-preview {
display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
-webkit-box-orient: vertical;
}
/*Height after full text*/
.lowerside-left-fulltext {
height: 410px;
}
/*See More*/
.seemore {
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
overflow: visible;
position: absolute;
}
.seemore:hover {
cursor: pointer;
text-decoration: underline;
}
/*See Less*/
.seeless {
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
position: absolute;
}
.seeless:hover {
cursor: pointer;
text-decoration: underline;
}
/*Right Side*/
.lowerside-right {
width: 480px;
top: 5%;
margin-left: 47%;
margin-bottom: 0.5%;
margin-top: -6%;
border-radius: 8px;
display: block;
background-color: white;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 1px 2px 0px rgb(0, 0, 0, 0.2);
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
</head>
<body>
<div class="lowerside">
<!--Left Side-->
<div class="lowerside-left" id="about-section">
<!--Left Side Text-->
<h3 class="lowerside-left-text" style="font-weight: bolder;">About</h3>
<p class="lowerside-left-text"
style="color:#216fdb; font-size: small; font-weight:light; padding-left: 85%; margin-top: -14%;cursor: pointer;">
See all</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="I icon.png">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">The Facebook
app Page celebrates how our friends inspire us, support us, and help us discover the world when we
connect.</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="I icon.png">
<p class="lowerside-left-text text-preview" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">
Community Values<br>
We believe people can do more together than alone and that each of us plays an important role in helping
to create a safe and respectful community. So, we’ve laid out a set of principles for us to follow on
this Page:<br><br>
Let’s celebrate the things that bring us together.<br><br>
Let’s choose to treat each other like neighbors rather than strangers.<br><br>
Let’s respect individuality and welcome diverse backgrounds and perspectives.<br><br>
Let’s assume people mean well.<br><br>
Our moderators are here for the community to uphold these values every day.</p>
<!--See More-->
<span class="seemore" onclick="toggleOverflow()" style="left: 13%; bottom: 43%;">See more</span> <span
class="seeless" onclick="toggleOverflow()" style="display: none; left: 13%">See
less</span><!--See Less-->
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="black_like.png" style="bottom: -13px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -7%;">183,205,742
people like this</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="follow.png" style="margin-top: -6px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">188,661,607
people follow this</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="check.png" style="margin-top: -6px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;">118 people
checked in here</p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon" src="World.png" style="margin-top: -6px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -11%;"><a href="Link"
style="color: #216fdb; text-decoration: none;">Link</a></p>
<!--Left Side Icon and Text-->
<img class="lowerside-left-icon"
style="margin-top: -6px; margin-left: 15px; background-image: url(file.png); background-repeat: no-repeat; background-position: 0px -300px; filter: contrast(0); height: 20px; width: 20px;">
<p class="lowerside-left-text" style="font-size: 15px; padding-left: 13%; margin-top: -9%;"><a
href="https://www.facebook.com/pages/category/internet-company"
style="color: #216fdb; text-decoration: none;">Internet Company</a></p>
</div>
</body>
</html>