4

サブナビゲーションリンクが表示され、ホバーまたは.accordionButtonをクリックしても開いたままである必要がある垂直アコーディオンナビゲーションを構築しています。

これまでのところ、ホバーすると子.accordionContentを展開することができましたが、開いたままにはなりません。

私はこのSOページを見ました：menu mouseenter mouseleave click、これは良いスタートかもしれませんが、含意に頭を包むことはできません。

これが私のフィドルとマークアップです：

http://jsfiddle.net/faGMR/8/

HTML

<ul id="mainNav">
<li><a class="accordionButton" href="javascript:void(0);">head link 1</a>

    <ul class="accordionContent">
        <li>
            <a href="javascript:void(0);">sub link 1</a>

        </li>
        <li>
            <a href="javascript:void(0);">sub link 2</a>

        </li>
    </ul>
</li>
<li><a class="accordionButton" href="javascript:void(0);">head link 2</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 3</a>
    <ul class="accordionContent">
        <li>
            <a href="javascript:void(0);">sub link 1</a>

        </li>
        <li>
            <a href="javascript:void(0);">sub link 2</a>

        </li>
    </ul>
</li>
<li><a class="accordionButton" href="javascript:void(0);">head link 4</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 5</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 6</a></li>
</ul>

JS

$(document).ready(function () {

$('.accordionContent').hide();

$('.accordionButton').mouseenter(function () {

    $(this).next('.accordionContent').stop().slideToggle("normal");

}, function () {

    $(this).addClass("hover");
    $(this).next('.accordionContent').stop().slideToggle('fast');

}).mouseleave(function () {

    $(this).next('.accordionContent').stop().slideToggle("normal");

}, function () {

    $(this).removeClass("hover");
    $(this).next('.accordionContent').stop().slideToggle('fast');

});

}）;

4

1 に答える 1

2

このフィドルのようなもの？

$(function () {
    var $accContents = $('.accordionContent'),
        $accButtons = $('.accordionButton');

    $accContents.hide();

    $accButtons.on('mouseenter click', function() {
        var $thisContent = $(this).parent().find('.accordionContent');
        if($thisContent.length) {
            $accContents.not($thisContent).slideUp('fast');
            $thisContent.slideToggle('fast');
        }
    });
});

トグルが必要ない場合の.slideDown('fast')代わりに使用します（クリックが廃止されます）。slideToggle

于 2013-03-08T10:39:46.797 に答える