1

jQuery アコーディオン エリアを作成しようとしています。私のマークアップは次のとおりです。

<ul class="accordion">
    <li>
        <a class="toggle" href="#one">Toogle 1</a>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </li>
    <li>
        <a class="toggle" href="#two">Toogle 2</a>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </li>
</ul>

私のjQueryは次のとおりです。

$(document).ready( function() {

        var accordion_head = $('.accordion > li > .toggle'),
            accordion_body = $('.accordion li > div');

        accordion_head.on('click', function(event) {

            event.preventDefault();

            if ($(this).attr('class') != 'active') {
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideDown('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }
        });
});

私がやりたいことは<a>、そのエリアのタグをクリックしたときに、各エリアを開いたり閉じたり (トグル) したりすることです。<a>別の領域がクリックされたときに他の領域を閉じたくありません。ただし、開いているときに「アクティブ」のクラスを適用し、<a>閉じたときにクラスを削除したいと思います。これについての助けをいただければ幸いです。

4

1 に答える 1