按類別查找元素並進行切換

Question

我的html代碼中有這樣的重復元素：

 <li>
   <a class="synth-faq-trigger" href="#0">Link</a>
     <div class="synth-faq-content">
        <p class="filler">Text</p>
     </div> <!-- synth-faq-content -->
 </li>

並且我使用以下命令，因此可以切換類'content-visible' ，該類將使該元素滑動以顯示<p>的內容，在本例中為Text 。

我想做的是在代碼中執行此操作之前，找到具有'content-visible'類的上一個元素並將其切換，因此只有一個元素始終保持可見。

$(this).next('.synth-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');

我最后嘗試了各種東西

$(this).closest('synth-faq-trigger').next().find('.synth-faq-content').toggleClass('content-visible');

根本沒有效果。 此外，w3school關於按班級查找元素的建議全部失敗了。

如何確保我找到所有包含'content-visible'並從中刪除該類？

Answer 1

我注意到您已經在示例代碼中使用了哈希鏈接，因此，無需任何JavaScript，就可以實現您正在嘗試的功能。 瀏覽器已經具有根據哈希目標處理顯示元素的功能，因此讓我們利用此瀏覽器功能，而不是再次在JavaScript中實現它。

現場演示： http ： //jsfiddle.net/g105b/cj5fscah/

錨的href指向一個哈希鏈接，該鏈接將放入瀏覽器的URL欄中。 每個li元素都有一個與哈希目標相對應的ID，使用:target CSS選擇器，您可以根據哈希值的不同來設置元素的樣式。

使用一些精美的CSS，您還可以添加動畫，其效果要比任何JavaScript都好。

<ul>
    <li id="0">
       <a class="synth-faq-trigger" href="#0">Link</a>
         <div class="synth-faq-content">
            <p class="filler">Text for one</p>
         </div> <!-- synth-faq-content -->
     </li>
    <li id="1">
       <a class="synth-faq-trigger" href="#1">Link</a>
         <div class="synth-faq-content">
            <p class="filler">Text for two</p>
         </div> <!-- synth-faq-content -->
     </li>
    <li id="2">
       <a class="synth-faq-trigger" href="#2">Link</a>
         <div class="synth-faq-content">
            <p class="filler">Text for three</p>
         </div> <!-- synth-faq-content -->
     </li>
</ul>

ul {
    width: 320px;
}
li {
    background: #aaf;
}

.synth-faq-content {
    overflow: hidden;
    height: 0;
    transition: height 200ms ease-in-out;
}
li:target .synth-faq-content {
    height: 3em;
}

編輯：如果您仍然需要操縱類名，則當哈希值更改以完成將類添加到正確的LI元素時，可以觸發一段簡單的JavaScript。

window.addEventListener("hashchange", function(e) {
    // Remove all .content-visible elements:
    [].forEach.call(document.querySelectorAll(".content-visible"), function(li) {
        li.classList.remove("content-visible");
    });

    // Add .content-visible to the li that contains the clicked anchor:
    document.querySelector("a[href='" + location.hash + "']").parentElement.classList.add("content-visible");
});

更新的演示： http : //jsfiddle.net/g105b/cj5fscah/1/

Answer 2

您可以使用類似的兄弟關系

 $('a').click(function() { var $li = $(this).next('.synth-faq-content').slideToggle(200).closest('li').toggleClass('content-visible'); $('li.content-visible').not($li).removeClass('content-visible').find('.synth-faq-content').slideUp(); }) 

 .content-visible > a { color: green; } .synth-faq-content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li> <a class="synth-faq-trigger" href="#0">Link</a> <div class="synth-faq-content"> <p class="filler">Text</p> </div> <!-- synth-faq-content --> </li> <li> <a class="synth-faq-trigger" href="#0">Link</a> <div class="synth-faq-content"> <p class="filler">Text</p> </div> <!-- synth-faq-content --> </li> <li> <a class="synth-faq-trigger" href="#0">Link</a> <div class="synth-faq-content"> <p class="filler">Text</p> </div> <!-- synth-faq-content --> </li> </ul>