2

素敵なホバー メニューを作成するだけです。

ユーザーがマウスをメニューの上に移動すると、さまざまな div が表示されます。

ここに私のHTMLコードがあります:

<ul class="menue">
  <li><a href="#">Startseite</a></li>
  <li id="1"><a href="#">Menü1</a></li>
  <li id="2"><a href="#">Menü2</a></li>
</ul>
<div class="subMenue" id="2">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>

そして、ここにJSがあります：

$(document).ready(function() {
    $(".menue li").mouseover(function(){
        if($(this).attr('id')){
            $(".subMenue #" + $(this).attr('id')).css("display", "block");
        }
    }).mouseout(function(){
        $(".subMenue #" + $(this).attr('id')).css("display", "none");
    });
});

<li>ID 1の を超える<div>と、ID 1 の が上昇するということをどのように取得できますか? 上記の私の可能性では、残念ながらそうではありません。

4

3 に答える 3

2

次のような問題があります。

  • 重複した ID が使用されています。セレクターには、無効な html 以外の問題が発生します。

  • セレクタが正しくない.subMenue #1はずです.subMenue#1。

Li のカスタムdata-target属性を使用して、id の代わりにターゲットのセレクターを提供し (ターゲットの ID を計算するための文字列連結を回避し、あらゆる種類のセレクターをネストして柔軟に使用できるように$(".subMenue" + $(this).data('target'))するため) 、それぞれの要素を選択するだけです。これは、ブートストラップのようなパターン フレームワークの一種です。

この方法を試してください：

HTML

<ul class="menue">
  <li><a href="#">Startseite</a></li>
  <li data-target="#1"><a href="#">Menü1</a></li>
  <li data-target="#2"><a href="#">Menü2</a></li>
</ul>
<div class="subMenue" id="1">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>

脚本

$(document).ready(function() {
    $(".menue li").mouseover(function(){
          $(".subMenue" +  $(this).data('target')).css("display", "block");
    }).mouseout(function(){
         $(".subMenue" + $(this).data('target')).css("display", "none");
    });
});

フィドル

ショートカットとして、ワンライナーを使用することもできます.toggle()

$(document).ready(function() {
    $(".menue li").hover(function(){
          $(".subMenue" +  $(this).data('target')).toggle();
    });
});
于 2013-07-02T18:27:31.750 に答える
0

URL のポイントがどこにもない場合は、構造を少し変更することをお勧めします。

<ul class="menue">
  <li><a href="#">Startseite</a></li>
  <li><a href="#submenu-1">Menü1</a></li>
  <li><a href="#submenu-2">Menü2</a></li>
</ul>
<div class="subMenue initial" id="submenu-1"><a name="submenu-1"></a>Test-Menue1</div>
<div class="subMenue" id="submenu-2"><a name="submenu-2"></a>Test-Menue2</div>

誰かが Javascript を有効にせずにアクセスしようとした場合に備えて JavaScript で要素を非表示にするなど、さらにいくつかの機能を追加すると便利な場合があります。そうすれば、リンクは名前付きのアンカーを指すようになります。

$(document).ready(function() {
  $(".subMenue").not(".initial").css("display", "none");//hide all but the initial div
  $(".menue li").hover(function(){
    $("#"+$(this).attr("href")).css("display", "block");
  },
  function(){
    $("#"+$(this).attr("href")).css("display", "none");
  });

});

于 2013-07-02T18:46:22.533 に答える