1

作業中の Web サイトの垂直アコーディオン メニューを作成しようとしています。jqueryで何かをするのはこれが初めてです。いくつかのことを除いて、希望どおりの作業メニューを取得できました。

1) ロードされたページに基づいて展開されたままになるメニューが必要です。2 番目のメニュー内の項目をクリックすると、ページがリロードされたときに 2 番目のメニューを展開する必要があります。メニュー内から新しいページをクリックしてロードすると、メニューが展開されたままになりません。ページをリロードすると、ヘッダーをクリックして再度展開するまで、完全に折りたたまれます。何日もオンラインで検索してきましたが、この問題を解決するために使用できるものが見つかりません。jquery cookie プラグインを使用して、現在読み込まれているページを確認し、それを使用して展開する必要があるメニューを特定することを検討しましたが、どちらも機能しません。

2) メニューはクリックしたときにのみ展開され、もう一度クリックしても折りたたまれません。展開したばかりのメニューをもう一度クリックして折りたたむことはできますか?

作成した js ファイルは次のとおりです。

function initMenu() {
    $('#menu ul').hide();
    $('#menu li a').click(function () {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).siblings().removeClass("selected");
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            if (!$(this).hasClass("selected")) {
                // Remove the class from anything that is active
                $("a.selected").removeClass("selected");
                // And make this active
                $(this).addClass("selected");
            }
            return false;
        }
    });
}
$(document).ready(function () {
    initMenu();
});

完全な html と css の jsfiddle もここにあります: http://jsfiddle.net/CShsY/

ありがとう。

4

6 に答える 6

2

私はあなたのフィドルを更新しました: http://jsfiddle.net/CShsY/4/

多くの一般的な改善があり、2 番目の問題も修正されています。関数initMenu()は次のようになります。

function initMenu() {
    $('#menu li > a').click(function(e){

        if($(this).next('ul').length > 0){

            e.preventDefault();

            var subNav = $(this).next('ul');

            if (subNav.is(':visible')){
                subNav.slideUp('normal')
                $(this).removeClass("selected");
            }else{
                $('#menu ul:visible').slideUp('normal');
                subNav.slideDown('normal');
                $("a.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        }

    });
}

e.preventDefault()のデフォルト アクションを防止するだけですa。また、そこにチェックを追加したのでa、後に がない要素はul通常のリンクとして機能します。

最初の問題については、次の質問を参照してください。現在のページのナビゲーション メニューを強調表示します。答えは基本的に、ページを一意に識別する要素にclassoridを追加し、各メニュー リンクにクラスを追加することでした。body例えば：

<body id="home">
    /* other code here */
    <ul id="menu">
        <li><a href="#">Menu 1</a>
            <ul class="home">
            /* more code here */

CSS:

#home #menu ul.home{display:block}
/* The sub menu of 'home' will show on the home page */
于 2013-04-29T21:10:01.150 に答える
0

これが最善の方法かどうかはわかりませんが、クリック機能を開いた直後に次の行を追加しました。

if ($(this).is(':visible')) {$('#menu ul:visible').slideUp('normal')};

したがって、完全なコードは次のようになります。 

function initMenu() {  
    $('#menu ul').hide();  
    $('#menu li a').click(function () {  
        if ($(this).is(':visible')) {$('#menu ul:visible').slideUp('normal')};  
        var checkElement = $(this).next();  
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {  
            $(this).siblings().removeClass("selected");  
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            if (!$(this).hasClass("selected")) {
                // Remove the class from anything that is active
                $("a.selected").removeClass("selected");
                // And make this active
                $(this).addClass("selected");
            }
            return false;
        }
    });
}
$(document).ready(function () {
    initMenu();
});
于 2013-04-29T21:09:40.440 に答える
0

Jqueryアコーディオンプラグインを使用する

最初の機能を実現するには、アクティブなオプションを使用します

2 番目の機能を実現するには、collapsibleオプションを使用します

于 2013-04-29T21:09:51.850 に答える
0

ポイント2）に答えることができます

クリックした要素に次の要素として表示される UL がある場合は、slideUp 関数を追加する必要があります。

すなわち

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).siblings().removeClass("selected");
    checkElement.slideUp('normal');
    return false;
 }
于 2013-04-29T21:11:06.513 に答える
0

ここで提供されたコードを使用しました (アコーディオン リストにすべて 1 つずつ実装しようとしました) が、親リスト項目が折りたたまれてそのサブリストを開くとリンクが無効になるという問題があります。それをリンクにする方法はありますか?サブリストを持つリンクアイテムをクリックすると、そのページが開きますが、サブメニューも開いたままになりますか?

于 2013-06-11T15:57:23.753 に答える