0

私はjqueryを理解しようとしていますが、レンガの壁にぶつかっています。ドロップダウンの表示および非表示メニュー機能を作成しました [ここをクリック][1] しかし、正しく動作させることができません。配信などについて表示されるページの右側にあります。ユーザーがタブの1つをクリックすると、クラスを持つタブが非表示になり.active、次のクラスが追加される機能を作成しようとしていますli。何らかの理由で、スクリプトが機能しません。誰かが理由を知っていますか？

$('.hidden-bits').removeClass('active');
    $('.hidden-bits').eq(0).addClass('active');

    $('.accordin-link').click(function(){
        var $this = $(this);
        $('.hidden-bits').slideUp().removeClass('active');
        $this.parent()('.hidden-bits').slideDown().addClass('active');
    });

HTML

<ul id="product-info">
    <li>
        <span>
            <a class="accordin-link" href="#">about</a>
        </span>
          <ul class="hidden-bits">
            <li>
                <div class="tab">
                    <div class="productDesc">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua.
                    </div>
                </div>
            </li>
        </ul>
    </li>

.hidden-bits{
    display: none;
}

.active{
    display: block;
}
4

1 に答える 1

0

これを行う必要があります-

$('.accordin-link').click(function(){
    var $this = $(this);
    $('.hidden-bits').slideUp().removeClass('active');
    $this.parent().next('.hidden-bits').slideDown().addClass('active');
});

デモ---> http://jsfiddle.net/HhMjn/

于 2013-06-16T16:52:28.713 に答える