0

jQueryアコーディオンスタイルのメニューを作成しようとしていますが、ほとんど機能していますが、ページの読み込み時にデフォルトでサブメニューが表示される理由を解明しようとして何時間も立ち往生しています。

CSSを使用してそれらを非表示にしようとしましたが、何らかの理由でスライドダウンしません。また、jQuery でそれらを非表示にしようとしましたが、同じ問題があります。

私は明らかにどこかで間違っていましたが、どこで解決できません。

HTML と CSS 用の JSFiddle を作成しました: http://jsfiddle.net/rcord/Gd7DM/7/

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

    $(document).ready(function () {
      $('#mobnav > ul > li > a').click(function () {
        $('#mobnav li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideToggle('normal');
      }
      if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#mobnav ul ul:visible').slideToggle('normal');
        checkElement.slideToggle('normal');
      }
      if ($(this).closest('li').find('ul').children().length === 0) {
        return true;
      } else {
        return false;
      }
     });
    });

ありがとうございました！

編集：答えてくれた2人に感謝します-それは完全に機能します。私はstackoverflowを初めて使用し、コメントを使用しないように指示されているため、どこに感謝を言うべきかわかりません...

4

2 に答える 2

0

メニュー セレクターを からnav ulに変更します#mobnav > ul。それ以外の場合は、最初のクリックでナビゲーション内のすべてのリストを切り替えます。

$(function () {
    var pull = $('#pull');
    menu = $('#mobnav > ul');
    $(menu).on('load').hide();
    menuHeight = menu.height();
    $(pull).on('click', function (e) {
        e.preventDefault();
        menu.slideToggle();
    });
...
});

更新されたフィドル

于 2013-09-21T08:02:10.323 に答える
0

上部のナビゲーション セレクターmenu = $('nav ul');がすべてのul要素を選択しています。代わりに `#mobnav > ul に変更してください

var pull = $('#pull');
menu = $('#mobnav > ul');
$(menu).on('load').hide();
menuHeight = menu.height();
$(pull).on('click', function (e) {
    console.log('p')
    e.preventDefault();
    menu.slideToggle();
});

デモ:フィドル

于 2013-09-21T08:02:20.880 に答える