0

I've got some jQuery that expands a div header when clicked to reveal a subheader. Another click on this subheader then reveals content. However there are two subheaders and I can only get the first to reveal.

I tried changing the selectors to the format recommended on stackoverflow.com/questions/1041344 but this only resulted in the subheaders not even being hidden when the page loads. This is what I've got so far:

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>

I've got the page up here if anyone could assist?

4

1 回答 1

2

尝试这个

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

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

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

检查小提琴

于 2012-10-30T19:46:56.007 回答