0

我正在尝试通过单击标题来切换内容、手风琴风格。这是我的示例，当我运行 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>
4

2 回答 2

2

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

最接近 -> 描述：对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

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


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

演示

$(document).ready(function () {
    $(".accordion-tab").click(function (e) {
        e.preventDefault();
        $(this).next('span').find('.content').not(':animated').slideToggle();
    });
});
于 2013-09-24T01:29:03.317 回答
0

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

所以您的查询需要是：

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

作为提示，请始终在您喜欢的浏览器控制台中测试 jquery 的选择序列，很容易迷失方向。

于 2013-09-24T01:31:44.720 回答