代码可以在 CodePen 中运行,但不能在 VS Code 中运行

问题描述 投票:0回答:1

我在 stackoverflow 上问了一个 Question,有人将我的代码放入 CodePen 中,并注意到它工作正常,就像我想要的那样,但每当我在 VS Code 中运行相同的代码时,它就不起作用。我不明白为什么代码不能在 VS Code 中工作,而在 CodePen 中不能完全按照我想要的方式工作。我还尝试在正文结束标记之前的代码底部添加 JS 编码,但没有任何效果。以下代码在 VS Code 中不起作用,但在 CodePen 中起作用:

CSS

/*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;
            }

HTML

<!--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> -->

JS

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 中一样。

javascript html css codepen
1个回答
-1
投票

它适用于 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>

© www.soinside.com 2019 - 2024. All rights reserved.