首页 文章

手风琴打开/关闭div

提问于
浏览 次
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');
     } 


 });
jquery accordion

1 回答

  • 1

    如果我理解正确，不需要检查下一个 Headers 是否被隐藏，只需检查 .side-nav h3 是否有类 .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');
    }
});

    Update

    这是一个更新的jsFiddle .

    回复于

相关问题