1

我正在设置一个手风琴，一旦单击 h3（无论有多少），就需要打开/关闭类 side-nav-block-item 中的所有 div。我无法修改 HTML 的结构，只有添加类。

HTML结构：

<div class="side-nav">

<div class="side-nav-item">
<h3>Title</h3>
<div class="side-nav-block-item">content</div>
<div class="side-nav-block-item">content</div>
</div>

<div class="side-nav-item">
<h3>Title</h3>
<div class="side-nav-block-item">content</div>
</div>

</div>

Jquery（我失败的尝试）

    $('.side-nav h3').addClass('on');
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.side-nav h3').click(function() {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.side-nav h3').removeClass('on');

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.side-nav-block-item').slideUp('normal');

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {

        //ADD THE ON CLASS TO THE BUTTON
        $(this).next().addClass('on');

        //OPEN THE SLIDE
        $(this).next().slideDown('normal');
     } 


 });
4

1 回答 1

1

如果我理解正确，则无需检查下一个标题是否隐藏，只需检查是否.side-nav h3有 class .on。如果是这样，请删除该类和slideUp. 如果没有，请添加类和slideDown.

看看这个jsFiddle。它应该完成你想要的。

$('.side-nav h3').addClass('on');
$('.side-nav h3').click(function() {
    if ($(this).hasClass('on')) {
        // Remove class
        $(this).toggleClass('on');
        // Slide up the siblings of the header that was clicked
        $(this).siblings('.side-nav-block-item').slideUp('normal');
    } else {
        // Add class
        $(this).toggleClass('on');
        // Slide down the siblings of the header that was clicked
        $(this).siblings('.side-nav-block-item').slideDown('normal');
    }
});

更新

这是一个更新的jsFiddle。

于 2013-10-15T18:02:21.077 回答