5

ここで、メニューjsfiddleの例を作成しました。ドロップダウン付きの水平メニューがありますが、必要なのは-ページの読み込み時に最初liに展開する必要があり（これは難しいことではありません）、他の要素にカーソルを合わせると、現在の展開されたコンテンツが表示されます（mouseleave現在の要素が拡張）。

これは、ホバーしてマウスを離したときの状況Item2ですItem2。

Item1       Item2          Item3
            |||||
subItem2.1  subItem2.2 subItem2.3

アップデート：

私はなんとかそれをすることができました、しかし例外を除いて、ここにJSFiddleのリンクがあります

それは私が望んでいたように動作しますが、リンクをクリックするとItem1、またはItem2、init()関数が呼び出され、Item1再びアクティブになると、アクティブなリンクを設定する必要があります-クリックしたもの、

たとえば、Item3リンクをクリックすると、Item3ページにリダイレクトされ、このリンクはメニューでアクティブになります。（ Jsfiddleのすべてのコード）

4

3 に答える 3

6

私があなたの質問を正しく理解している場合、問題は、すべてを再描画するためにinit関数を呼び出す必要があるということですが、同時に、item1をcurrentとして設定します。link2を押したばかりの場合、これは問題ありません。

あなたの解決策はほとんどすべての初期化コードを削除することであるはずだと思うなら。これはすべてcssスタイルで実行できるため、コードが大幅に簡素化されます。

アイテムにアクティブを設定します。（あなたはすでにアンカーでこれを行っています、liでそれを行ってください）。次に、すべての外観スタイルをcssに配置すると、スクリプトが削減されます。

サブアイテムでアクティブに設定する必要はありません。li.activeliのようなルールを設定できます。つまり、アクティブなliの子孫であるliです。

これをすべて実行すると、init関数を完全に回避できます。

フィドルを追加

更新されたフィドルでそれを変更しました

表示されているアイテムメニューを「現在」とマークしていますが、「アクティブ」はクラス名を混乱させています。2番目のレベルのliに影響を与えることができるように、liにある必要があります。

これで、スクリプトは

$(document).ready(function() {
    $("#menu_item ul.menu li.expanded").mouseover(function(){
        var previous = $('.current');
        previous.removeClass('current');          
        $(this).addClass('current');
    });
});

以前の現在の要素から現在の要素を削除し、それを新しい要素に追加しています。

最初の選択はマークアップに含まれています

<div id="menu_item">
    <ul class="menu">
        <li class="expanded first current">
        <a href="#" title="">Item1</a>

そして、新しいcssルールは次のとおりです。

#menu_item > ul.menu > li.current  {
    background-color: orange;
}
#menu_item ul.menu li ul {
    display: none;
}
#menu_item ul.menu li.current ul {
    display: block;
}
于 2013-02-02T08:16:23.737 に答える
2

正しく機能するよりもスタイルを変更する必要があります。

ul.menu li.expanded ul {
  position: relative;
  display: block;
  top: 20px;
  background-color: orange;
}
于 2013-01-31T11:42:00.407 に答える
2

おそらく、アクティブな状態をターゲットとするURLが、あなたが興味を持っているものかもしれないと思っています。JavaScriptを使用して、現在のパスを取得できますwindow.location.pathname。次のようなものを使用してjQueryで確認できます。

$(".first a[href=" + window.location.pathname + "]").addClass('active');

.firstこれにより、現在のパスと同じhref属性を持つすべてのアンカーにアクティブクラスが追加されます。先頭のスラッシュをトリミングする必要がある場合があります。

于 2013-02-05T03:38:29.957 に答える