jQuery ".closest“不工作

Question

我最近对模板做了一些调整。它有这样的常见问题部分，你点击一个问题，答案滑下来/显示-

不幸的是，这似乎是坏的。所以我想我可以在footer.tpl中添加一些jquery。这基本上是可行的，但它仍然需要一些调整。

我认为使用.closest()是正确的选择，but...naaa :/如果我忽略了它，它就会运行，但是每个li都会做出反应。我应该使用什么，所以只有“最近”的li显示/隐藏？

​

$(document).ready(function(){
    $(".accordion_current").click(function(){
        $.closest(".accordion_content").slideToggle();
    });
});

<ul class="list-accordion">
	<li>
	    <h3 class="accordion_current">Anfahrt & Messeplan</h3>
	    <ul class="accordion_content">
		<li>
		<p>test</p>
                </li>
            </ul>
	</li>
        <li>
	    <h3 class="accordion_current">Anfahrt & Messeplan</h3>
	    <ul class="accordion_content">
	        <li>
	        <p>test</p>
                </li>
	    </ul>
        </li>
</ul>	

​

Answer 1

你不需要closest，你需要next。使用closest，您将找到元素的父级，但您希望查找同级元素。

请注意，您必须使用$(this)，而不仅仅是$。

​

$(function() {
    $(".accordion_current").click(function() {
        $(this).next(".accordion_content").slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list-accordion">
  <li>
    <h3 class="accordion_current">Anfahrt & Messeplan</h3>
    <ul class="accordion_content">
      <li>
        <p>test</p>
      </li>
    </ul>
  </li>
  <li>
    <h3 class="accordion_current">Anfahrt & Messeplan</h3>
    <ul class="accordion_content">
      <li>
        <p>test</p>
      </li>
    </ul>
  </li>
</ul>

​