Question

我试图通过点击标题来切换内容，手风琴风格。这是我的例子，当我通过Firebug运行时，.click函数被调用但手风琴内容不会切换。我尝试了几种不同的选择器组合但没有成功。

任何建议都表示赞赏。

由于

 <style type="text/css">

.content { display: none;}

</style>
<div class="accordion complete" id="step_1">
  <div class="accordion-tab">Step 1.</div>
    <span>
      <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit aliquam malesuada. 

        </p>
    </div>
   </span>
</div>

<script type="text/javascript">

    $(document).ready(function() {

        $(".accordion-tab").click(function(e) {

            e.preventDefault();
            $(this).closest('span').find('.content').not(':animated').slideToggle();


        });

    });
</script>

Answer 1

您需要.next()而不是.closest()

最近 - ＆gt;描述：对于集合中的每个元素，获取第一个元素   通过测试元素本身和匹配选择器的元素   遍历DOM树中的祖先。

最接近匹配当前元素或DOM中的祖先。

next - ＆gt;描述：获取每个兄弟的紧随其后的兄弟匹配元素集中的元素。如果提供选择器，它仅当它与该选择器匹配时才检索下一个兄弟。

DEMO

$(document).ready(function () {
    $(".accordion-tab").click(function (e) {
        e.preventDefault();
        $(this).next('span').find('.content').not(':animated').slideToggle();
    });
});

Answer 2

我认为你可以得出这个“最接近（'跨度'），因为它正在寻找祖先，而不是孩子： JQuery#closest

因此您的查询需要：

$(this).find('.content').not(':animated').slideToggle();

作为提示，总是在你最喜欢的浏览器控制台中测试jquery的选择序列，它很容易迷失在它上面。

手风琴内容没有显示 - JQuery

2 个答案: