Jquery添加/刪除類不起作用

我一直在嘗試通過向jquery語句添加css類來製作箭頭旋轉。這用於顯示/隱藏標籤，這將允許我根據箭頭顯示哪一個是打開的。Jquery添加/刪除類不起作用

我有這個工作在前一頁，當我有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>

任何建議將高度讚賞！

來源

2015-10-29 Brendon Wells

需要看HTML – Dhunt

包括你的HMTL兄弟。 – bot

可能是你沒有正確包含jQuery，所以只有'console.log'才能工作。但我們真的需要看到HTML以便給出任何一種很好的答案。 –

請嘗試使用以下代碼。我相信它會工作，按您的需要：

修改了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>

來源

2015-10-29 09:06:42 vijayP

不幸的是，沒有工作:( –

@BrendonWells - 哦..我再試一次。謝謝 – vijayP

@BrendonWells - 它可能爲你把其他的CSS也放入你的問題 – vijayP

同時添加類，試試這個

1.首先刪除將要添加類。

2.和之後添加動畫類。

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

來源

2015-10-29 08:59:30

您是否介意解釋爲什麼這會有所幫助？ –

您的點擊功能是否觸發？如果不是你的全局showhide變量總是一個，我建議刪除全局變量，而是用switch變量作爲參數調用changePanel（）。調試問題的一個簡單方法是在changePanel（）函數的開頭添加一個console.log（showhide）。

addClass和removeClass的語法是正確的。

來源

2015-10-29 08:59:51

Jquery添加/刪除類不起作用

回答

相關問題