Question

我一直试图通过向jquery语句添加css类来使箭头旋转。这用于显示/隐藏选项卡，这将允许我根据箭头显示哪一个打开。

当我有3个标签时，我在前一页上工作但是我在新页面上添加了第4个标签，现在它无法正常工作。

它正在打印我的console.log并且没有返回任何错误，所以我很难理解我做错了什么。

这是JQuery：

<script>
    $("#border-information").click (function() {
        $("#showhide-information").show(500);
        $(".arrowup").addClass("turn");
        } );

    $("#border-resources").click (function() {
        $("#showhide-resource").show(500);
        $(".arrowdown2").addClass("turn");
        } );

    $("#border-comment").click (function() {
        $("#showhide-comment").show(500);
        $(".arrowdown3").addClass("turn");
    } );

    $("#border-timelapse").click (function() {
        $("#showhide-timelapse").show(500);
        $(".arrowdown4").addClass("turn");
    } );

var showHide="one";


$("#border-information").click (function() {
    showHide="one";
    changePanel();
} );

$("#border-resources").click (function() {
    showHide="two";
    changePanel();
} );

$("#border-comment").click (function() {
    showHide="three";
    changePanel();
} );

$("#border-timelapse").click (function() {
    showHide="four";
    changePanel();
} );

function changePanel(){
    switch(showHide){

        case "one":
        //My code
        console.log("my code 1 is working");
        $("#showhide-comment").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown3").removeClass("turn");
        $(".arrowup").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

        case "two":
        //My code
        console.log("my code 2 is working");
        $("#showhide-information").hide(500);
        $("#showhide-comment").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown3").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

        case "three":
        //My code
        console.log("my code 3 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown4").removeClass("turn");
        break;

         case "four":
        //My code
        console.log("my code 4 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-comment").hide(500);
        $(".arrowup").addClass("turn");
        $(".arrowdown2").removeClass("turn");
        $(".arrowdown3").removeClass("turn");
        break;

        default:
        //My default code
    }
}
;
</script>

这是我使用的CSS类：

        #wrapper {
        background-color: #1B9AA1;
        width: 100%;
        overflow:hidden;
    } 

    body {
        margin: 0;
        font-family: Arial;
        height: 100%;
        width: 100%;
    }

    .container {
        background-color: #1B9AA1;
        width:100%;
    }

    #sidebar {
        width: 100%;
        background-color: #1B9AA1;
        overflow: hidden;
        height: 70%;
    }

    #resources-text {
        font-size: 26px;
        font-weight: none;
        display: inline-block;
        padding-left: 3px;
        color: white;
    }

    #information-text {
        font-size: 26px;
        font-weight: none;
        padding-left: 36px;
        color: white;
        margin: 0;
        float: left;
        display: inline-block;
    }

    .description {
        font-size: 13.5px;
        color: white;
        display: inline-block;
        padding-left: 3px;
    }

    .region {
        font-size: 13.5px;
        color: white;
        padding-left: 60px;
    }

    #resources {
        color: white;
        font-size: 26px;
        padding-left: 100px; 
        font-weight: none;
        margin: 0;
        margin-top: 1px;
    }

    .resource-body {
        color: white;
        font-size: 13.5px;
        padding-left: 105px;
    }

    #timelapse {
        color: white;
        font-size: 26px;
        margin: 0;
        padding-left: 100px;
    }

     .timelapse-body {
        color: white;
        font-size: 13.5px;
        padding-left: 105px;
    }

   .dacast {
       float: left;
       width: 47%;
       background-color: black;
       clear: after;
       margin-left: 40px;
       margin-bottom: 20px;
    }

    .slides {
        margin-left: 40px;
        display: inline-block;
        margin-right: 20px;
        width: 47%;
        position: relative;
        z-index: 0;
    }

     .comment-title {
        margin: 0;
        margin-top: 1px;
    }

    .comment-title {
        color: white;
        font-size: 26px;
        font-weight: none;
    }

    #showhide-information {
        padding-left: 105px;
    }

    .comment-display {
        width: 90%;
        height: 417px;
        border: none;
        background-color: white;
        max-height: 417px;
        overflow-y: scroll;
        margin: auto;
    }

    .comment-comment {
        width: 55%;
        height: 40px;
        margin-left: 4%;
        float: left;
        display: inline-block;
        border: none;
        border-radius: 10px 10px 10px 10px;
    }

    .indent {
        padding-left: 15px;
    }

    .comment-button {
        width: 30%;
        margin-right: 4%;
        float: right;
        display: inline-block;
        height: 40px;
        color: black;
        font-weight: none;
        background-color: white;
        padding: 0;
        border: none;
        border-radius: 10px 10px 10px 10px;
    }

    .livestream {
        background-color: #1B9AA1;
    }

    #showhide-resource {
        display: none;
    }

    #showhide-comment {
        display: none;
    }

    #showhide-timelapse {
        display: none;
    }

    .pdf {
        height: 20px;
    }

    .arrowup {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown2 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown3 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown4 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    #border-information {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

     #border-resources {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

     #border-comment {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

    #border-timelapse {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;

    .turn { 
        transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

这里要求的是HTML：

<body>

    <div class="container">
    <div class="livestream">
    <video id="myvideo" class="dacast" height="540px" controls>
    <source src="https://s3-eu-west-1.amazonaws.com/icevideos/140520+Stalbans+Construction+2025/140520.STALBANS.Contruction2025.HIGH.mp4"></source>
    </video>
    </div>
    <a class="overlay"></a>
    <div class="powerpoint">
    <iframe class="slides" src="https://docs.google.com/presentation/d/1lbTjJ5q4fr1X4rgryWEAmkq-WuWJIoseU7Q1NyqXc44/embed?start=false&loop=false&delayms=3000" frameborder="0" height="540px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>
    <div class="sidebar-background">
    <div id="sidebar">
        <div class="information">
        <div id="border-information">
    <img src="http://cpdonline.tv/ice-events/arrowUp.png" class="arrowup" height="26px"><p id="information-text">About this event</p>
    </div>
    <div id="showhide-information" class="panels">
    <span class="region">
        <p class="event-float">Event Date - 05/11/2015</p>
        <p>Event Time: 17:30 - 19:30    <br>


        <p>Speakers: <br>

    <span class="indent"><strong> - Cath Schefer</strong> - UK Managing Director, MWH</span><br>
    <span class="indent"><strong> - Professor David Kennedy</strong> - Deputy Director of the Cardiff School of Engineering and professor of Structural Engineering, Cardiff University</span></br>
    <span class="indent"><strong> - Alun Davies</strong> - Business Executive, Alun Griffiths Contractors Ltd</span></br>
    <span class="indent"><strong> - Dawn Turner</strong> - Head of Pension Fund Management, Environment Agency</span>

    </p>


    <span class="description" name="information">
        <p> 
            Presentations will be given on our four strategic themes of;
<br />
<span class="indent">- Resilience <br /></span>
<span class="indent">- Urbanisation <br /></span>
<span class="indent">- Industry Transformation <br /> </span>
<span class="indent">- Resource Scarcity</span>
            <br />
            </p>

<span class="indent">- London</p>
    </span>
<br /> 

    </div>
            </div>
    <div>
    <div id="border-resources">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown2" height="26px"><p id="resources">Resources</p>
    </div>
    <div id="showhide-resource">
    <div class="resource-body" name="resources">
    <p>Additional resources available to go with this lecture:</p>
    <p class="indent"> - <img class="pdf" src="/new.cpd/ice-events/livestream/img/pdf.png"> This is a pdf.pdf</p>
    </div>
    </div>
    </div>

    <div>
    <div id="border-timelapse">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown4" height="26px"><p id="timelapse">Timelapse</p>
    </div>
    <div id="showhide-timelapse">
    <div class="timelapse-body" name="timelapse">
    <br>
    <div id="jump">10:00 - This is something</div>
    <br>
    <div id="jump2">20:00 - This is something</div>
    <br>

    </div>
    </div>
    </div>

    <div id="border-comment">

    <div id="comments">
    <p class="comment-title">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown3" height="26px"><p id="timelapse">Live Chat</p>
    </p>
    </div>
    </div>
    <div id="showhide-comment">

    <p>ebfgksbgjklsdbghklsg</p>
        </div>
    <br
    </div>

任何建议都将受到高度赞赏！

Answer 1

添加课程时，请尝试此

1.首先删除要添加的类。

2.而不是添加动画类。

$(".arrowup").removeClass("turn");
$(".arrowup").addClass("turn");

Answer 2

您的点击功能是否会触发？如果不是你的全局showhide变量总是一个，我建议删除全局变量，而是使用switch变量作为参数调用changePanel（）。调试问题的一种简单方法是在changePanel（）函数的开头添加console.log（showhide）。

addClass和removeClass的语法是正确的。

Answer 3

尝试使用以下代码。我相信它会按照您的需要运作：

稍微修改了HTML：

<img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowup turn" height="26px"><p id="information-text">About this event</p>

默认情况下添加了turn类，并使用了相同的arrowDown.png而不是向上箭头。

在倒数第二个CSS样式表中也缺少}。看看可运行的代码片段。

$("#border-information").click (function() {
        showHide="one";
        changePanel();
        $(".turn").removeClass("turn");
        $(".arrowup").addClass("turn");
        $("#showhide-information").show(500);
    });

    $("#border-resources").click (function() {
        showHide="two";
        changePanel();
        $(".turn").removeClass("turn");
        $(".arrowdown2").addClass("turn");
        $("#showhide-resource").show(500);

    });

    $("#border-comment").click (function() {
        showHide="three";
        changePanel();
        $(".turn").removeClass("turn");
        $(".arrowdown3").addClass("turn");
        $("#showhide-comment").show(500);
    });

    $("#border-timelapse").click (function() {
        showHide="four";
        changePanel();
        $(".turn").removeClass("turn");
        $(".arrowdown4").addClass("turn");
        $("#showhide-timelapse").show(500);
    });

var showHide="one";

function changePanel(){
    switch(showHide){

        case "one":
        //My code
        console.log("my code 1 is working");
        $("#showhide-comment").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        break;

        case "two":
        //My code
        console.log("my code 2 is working");
        $("#showhide-information").hide(500);
        $("#showhide-comment").hide(500);
        $("#showhide-timelapse").hide(500);
        break;

        case "three":
        //My code
        console.log("my code 3 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-timelapse").hide(500);
        break;

         case "four":
        //My code
        console.log("my code 4 is working");
        $("#showhide-information").hide(500);
        $("#showhide-resource").hide(500);
        $("#showhide-comment").hide(500);
        break;

        default:
        //My default code
    }
}

#wrapper {
        background-color: #1B9AA1;
        width: 100%;
        overflow:hidden;
    } 

    body {
        margin: 0;
        font-family: Arial;
        height: 100%;
        width: 100%;
    }

    .container {
        background-color: #1B9AA1;
        width:100%;
    }

    #sidebar {
        width: 100%;
        background-color: #1B9AA1;
        overflow: hidden;
        height: 70%;
    }

    #resources-text {
        font-size: 26px;
        font-weight: none;
        display: inline-block;
        padding-left: 3px;
        color: white;
    }

    #information-text {
        font-size: 26px;
        font-weight: none;
        padding-left: 36px;
        color: white;
        margin: 0;
        float: left;
        display: inline-block;
    }

    .description {
        font-size: 13.5px;
        color: white;
        display: inline-block;
        padding-left: 3px;
    }

    .region {
        font-size: 13.5px;
        color: white;
        padding-left: 60px;
    }

    #resources {
        color: white;
        font-size: 26px;
        padding-left: 100px; 
        font-weight: none;
        margin: 0;
        margin-top: 1px;
    }

    .resource-body {
        color: white;
        font-size: 13.5px;
        padding-left: 105px;
    }

    #timelapse {
        color: white;
        font-size: 26px;
        margin: 0;
        padding-left: 100px;
    }

     .timelapse-body {
        color: white;
        font-size: 13.5px;
        padding-left: 105px;
    }

   .dacast {
       float: left;
       width: 47%;
       background-color: black;
       clear: after;
       margin-left: 40px;
       margin-bottom: 20px;
    }

    .slides {
        margin-left: 40px;
        display: inline-block;
        margin-right: 20px;
        width: 47%;
        position: relative;
        z-index: 0;
    }

     .comment-title {
        margin: 0;
        margin-top: 1px;
    }

    .comment-title {
        color: white;
        font-size: 26px;
        font-weight: none;
    }

    #showhide-information {
        padding-left: 105px;
    }

    .comment-display {
        width: 90%;
        height: 417px;
        border: none;
        background-color: white;
        max-height: 417px;
        overflow-y: scroll;
        margin: auto;
    }

    .comment-comment {
        width: 55%;
        height: 40px;
        margin-left: 4%;
        float: left;
        display: inline-block;
        border: none;
        border-radius: 10px 10px 10px 10px;
    }

    .indent {
        padding-left: 15px;
    }

    .comment-button {
        width: 30%;
        margin-right: 4%;
        float: right;
        display: inline-block;
        height: 40px;
        color: black;
        font-weight: none;
        background-color: white;
        padding: 0;
        border: none;
        border-radius: 10px 10px 10px 10px;
    }

    .livestream {
        background-color: #1B9AA1;
    }

    #showhide-resource {
        display: none;
    }

    #showhide-comment {
        display: none;
    }

    #showhide-timelapse {
        display: none;
    }

    .pdf {
        height: 20px;
    }

    .arrowup {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown2 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown3 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    .arrowdown4 {
        float: left;
        display: inline-block;
        padding-left: 40px;
    }

    #border-information {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

     #border-resources {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

     #border-comment {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
    }

    #border-timelapse {
        border-width: 2px 0px 2px 0px;
        border-color: white;
        border-style: solid;
        margin: 0;
        margin-top: 1px;
        height: 26px;
        width: 100%;
        cursor: pointer;
}
    .turn { 
        transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="container">
    <div class="livestream">
    <video id="myvideo" class="dacast" height="540px" controls>
    <source src="https://s3-eu-west-1.amazonaws.com/icevideos/140520+Stalbans+Construction+2025/140520.STALBANS.Contruction2025.HIGH.mp4"></source>
    </video>
    </div>
    <a class="overlay"></a>
    <div class="powerpoint">
    <iframe class="slides" src="https://docs.google.com/presentation/d/1lbTjJ5q4fr1X4rgryWEAmkq-WuWJIoseU7Q1NyqXc44/embed?start=false&loop=false&delayms=3000" frameborder="0" height="540px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>
    <div class="sidebar-background">
    <div id="sidebar">
        <div class="information">
        <div id="border-information">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowup turn" height="26px"><p id="information-text">About this event</p>
    </div>
    <div id="showhide-information" class="panels">
    <span class="region">
        <p class="event-float">Event Date - 05/11/2015</p>
        <p>Event Time: 17:30 - 19:30    <br>


        <p>Speakers: <br>

    <span class="indent"><strong> - Cath Schefer</strong> - UK Managing Director, MWH</span><br>
    <span class="indent"><strong> - Professor David Kennedy</strong> - Deputy Director of the Cardiff School of Engineering and professor of Structural Engineering, Cardiff University</span></br>
    <span class="indent"><strong> - Alun Davies</strong> - Business Executive, Alun Griffiths Contractors Ltd</span></br>
    <span class="indent"><strong> - Dawn Turner</strong> - Head of Pension Fund Management, Environment Agency</span>

    </p>


    <span class="description" name="information">
        <p> 
            Presentations will be given on our four strategic themes of;
<br />
<span class="indent">- Resilience <br /></span>
<span class="indent">- Urbanisation <br /></span>
<span class="indent">- Industry Transformation <br /> </span>
<span class="indent">- Resource Scarcity</span>
            <br />
            </p>

<span class="indent">- London</p>
    </span>
<br /> 

    </div>
            </div>
    <div>
    <div id="border-resources">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown2" height="26px"><p id="resources">Resources</p>
    </div>
    <div id="showhide-resource">
    <div class="resource-body" name="resources">
    <p>Additional resources available to go with this lecture:</p>
    <p class="indent"> - <img class="pdf" src="/new.cpd/ice-events/livestream/img/pdf.png"> This is a pdf.pdf</p>
    </div>
    </div>
    </div>

    <div>
    <div id="border-timelapse">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown4" height="26px"><p id="timelapse">Timelapse</p>
    </div>
    <div id="showhide-timelapse">
    <div class="timelapse-body" name="timelapse">
    <br>
    <div id="jump">10:00 - This is something</div>
    <br>
    <div id="jump2">20:00 - This is something</div>
    <br>

    </div>
    </div>
    </div>

    <div id="border-comment">

    <div id="comments">
    <p class="comment-title">
    <img src="http://cpdonline.tv/ice-events/arrowDown.png" class="arrowdown3" height="26px"><p id="timelapse">Live Chat</p>
    </p>
    </div>
    </div>
    <div id="showhide-comment">

    <p>ebfgksbgjklsdbghklsg</p>
        </div>
    <br
    </div>

Jquery add / removeClass不起作用

3 个答案: