-3

私は JS/jQuery が苦手なので、私のメニューをブラウザ互換/レスポンシブ メガ メニューに変える手助けが必要です。私が望むものは非常にシンプルで、ページの読み込みに悪影響を与えたくないので、これに大規模なプラグインを使用したくありません.

ページの読み込み時に「メニューを開く」を表示したいだけです。「メニューを開く」をクリックするul#expandedと、「メニューを開く」リンクを表示して非表示にしたいと思います。ul#expanded次に、「メニューを閉じる」をクリックすると、「メニューを開く」を非表示にして再度表示したいと思います。まったく空想的なものはありません。

私はjQueryで遊んでいtoggleますが、成功していません。ここに HTML/CSS を配置しました: http://jsfiddle.net/YrTMm/

誰か助けてくれませんか？

4

2 に答える 2

2

あなたが実際にいくつかのことを試したように見えるので、私はあなたに骨を投げます. show()これは、クリック ハンドラーをアタッチし、jQuery のメソッドとメソッドを使用することで簡単に実行できますhide()。

$(document).ready(function(){
    //Set up a quick reference to the element.
    var el = $("#expanded");
    //Hide the element by default.
    el.hide();
    //Add a click handler to the 'open' link.
    $("#open").click(function(){
        //Check if the expanded menu is visible.
        if(el.is(":visible")){
            //If it is, hide it.
            el.hide();
        }else{
            //If not, show it.
            el.show();
        }
    });
});

ワーキング JSFiddle

于 2013-01-07T14:22:02.567 に答える
0

これを実現する別の方法があります。（cssとjqueryのタッチを使用）

http://jsfiddle.net/CSmg7/

最初に、ナビゲーションをいくらか簡素化できます (はい、UL に実際のものが必要であることはわかっています)。また、アンカーを ul の直接の子として持つことは無効です。アンカーはリスト項目に含まれているか、またはその外側に含まれている必要があります。 UL。メニューに または を使用することをお勧めします。

<nav id="nav">
    <ul>
        <li>
          <a href="#" class="open toggleMenu">Open Menu</a><a href="#" class="closed toggleMenu">Close Menu</a>
            <ul>
                <li>something</li>
                <li>something</li>
            </ul>
        </li>
    </ul>
</nav>

js を使用してクラスを親に追加するだけです。

$("#nav")
.on("click", ".toggleMenu", function(event){
 event.preventDefault();
 $(this)
  .parent()
   .toggleClass("open");
});

少しcssを追加して、jqueryを機能させます。

#nav li ul,
#nav li .toggleMenu.closed,
#nav li.open .toggleMenu.open{
display: none;
}
#nav li.open ul,
#nav li.open .toggleMenu.closed{
display: block; /*or whatever you need*/
}

その後、必要に応じて複数のメニューを使用できます。

于 2013-01-07T14:36:36.177 に答える