Question

我是JS的新手，现在就学习它。我试图用toggleclass和toggleslide来实现简单的手风琴，但是我无法弄清楚是什么导致我的代码无法运行！

<div class="outer-wrapper collapse">
    <div class="inner-wrapper1">title 1</div>
    <div class="inner-wrapper2">
        something written
    </div>
</div>

<div class="outer-wrapper collapse">
    <div class="inner-wrapper1">title 1</div>
    <div class="inner-wrapper2">
        something written
    </div>         
</div>

JS：

$('.inner-wrapper1').click(function(e){
    $(this).parent().toggleClass("collapse expand"); 
    $(this).parents('div.outer-wrapper').find('.inner-wrapper2').slideToggle('slow');
});

CSS：

.outer-wrapper.collapse .inner-wrapper2 {
    display :none;
}
.outer-wrapper.expand .inner-wrapper2 {
    display :block;
}

Answer 1

您不需要额外的课程来展示它。 SlideToggle自己做。

HTML：

<div class="outer-wrapper">
    <div class="inner-wrapper1">title 1</div>
    <div class="inner-wrapper2 hide">
        something written
    </div>
</div>

CSS：

.hide { display: none }

JS：

$('.inner-wrapper1').click(function(e){
    $(this).parent().find('.inner-wrapper2').stop().slideToggle();
});

工作演示 - http://jsfiddle.net/d42cfxcb/

更新

你可以简化更多 -

HTML

<div class="outer-wrapper">
    <div>title 1</div>
    <div>something written</div>
</div>

JS

var $accordion = $('.outer-wrapper');

$accordion.each(function(){
    // or you can do this with CSS using hide class- .hide { display: none }
    $(this).children('div:eq(1)').hide();
});

$accordion.children('div:eq(0)').click(function(){
    $(this).parent().children('div:eq(1)').stop().slideToggle();
});

工作演示 - http://jsfiddle.net/d42cfxcb/1/

简单的slidetoggle无法正常工作

1 个答案:

更新