现场演示：http://jsfiddle.net/g105b/cj5fscah/

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>的内容，在本例中为文本

我想要做的是在我的代码中执行此操作之前，找到具有'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>

按类查找元素并切换它

2 个答案:

现场演示：http://jsfiddle.net/g105b/cj5fscah/