Question

我有一些jQuery在点击显示子标题时展开div标题。再次单击此子标题然后显示内容。然而，有两个子标题，我只能得到第一个显示。

我尝试将选择器更改为stackoverflow.com/questions/1041344上建议的格式，但这只会导致子页面在页面加载时甚至不被隐藏。这是我到目前为止所得到的：

jQuery的：

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".subheadingFrame, .subheadingEngine").hide();
    jQuery(".heading").click(function()
    {
        jQuery(this).next(".subheadingFrame, .subheadingEngine").slideToggle(500);
    });
    jQuery(".content").hide();
    jQuery(".subheadingFrame, .subheadingEngine").click(function()
    {
        jQuery(this).next(".content").slideToggle(500);
    });
});
</script>

HTML：

<div id="divSparesSubHeader" class="heading">Benelli1</div>
<div id="divSparesLastHeader" class="subheadingFrame">Frame/Subheader1</div>
<div id="divSparesItem" class="content">Content 1</div>
<div id="divSparesLastHeader" class="subheadingEngine">Engine/Subheader2</div>
<div id="divSparesItem" class="content">Content 2</div>

如果有人可以提供帮助，我的页面会here吗？

Answer 1

试试这个

jQuery(".heading").click(function(){
        jQuery(this).nextAll(".subheadingFrame").first().slideToggle(500);
        jQuery(this).nextAll(".subheadingEngine").first().slideToggle(500);
});

.next()仅针对.heading的直接兄弟。因此，如果找不到，它将返回一个空列表..

因此，在这种情况下，最好使用.nextAll()和.first()

来定位元素

<强> Check Fiddle

jQuery没有扩展这两个类

1 个答案: