javascript - 简单的滑动切换不起作用

Question

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

<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

您不需要额外的类(class)来展示它。 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/