0

次のコードは、2つのアラートボックスを生成します。1つ目は、を含みundefined、2つ目はid属性を含みます。return false最後に追加すると、が表示されるだけundefinedで、IDは返されません。私はこのjqueryのことでかなり新しいです。このコードの背後にある考え方は、をクリックすると<a href="/abcd" id="abc"></a>、最初は表示がnone<ul class="abc"></ul>に設定されているを表示することです。

$(".navgbr-itm").click(function(){
  target_menu = $(this).attr("id");
  alert(target_menu);
  //$("."+target_menu).toggle();
});

私はjquery1.8.2とjquery-ui1.9を使用しています。このスニペットに関係のないsthにはjqueryuiを使用しています（画像スライダー用）。また、メモとして、クリック後にナビゲーションをキャンセルする必要があります。

html：

<nav id="main-navgbr" class="htmlf-block">  
    <ul id="main-navgbr-itms" class="navgbr-itms">  
      <li id="main-nvgbr-itm-academc" class="navgbr-itm"><a  
        href="/akademik" class="navgbr-itm">Akademik</a></li>  
      <li id="main-nvgbr-itm-idari" class="navgbr-itm"><a  
        href="/idari" class="navgbr-itm">İdari / Personel</a></li>  
      <li id="main-nvgbr-itm-ogrn" class="navgbr-itm"><a  
        href="/ogrenci" class="navgbr-itm">Öğrenci</a></li>  
      <li id="main-nvgbr-itm-arastr" class="navgbr-itm"><a  
        href="/arastirma" class="navgbr-itm">Araştırma</a></li>  
      <li id="main-nvgbr-itm-hast" class="navgbr-itm"><a  
        href="/hastaneler" class="navgbr-itm">Hastaneler</a></li>  
      <li id="main-nvgbr-itm-ktph" class="navgbr-itm"><a  
        href="/kutuphane" class="navgbr-itm">Kütüphane</a></li>  
      <li id="main-nvgbr-itm-bshi" class="navgbr-itm"><a   
        href="/bshi" class="navgbr-itm">Basın / Halkla İlişkiler</a></li>   
      <li id="main-nvgbr-itm-blog" class="navgbr-itm"><a  
        href="/bloglar" class="navgbr-itm">Bloglar</a></li>  
    </ul>
</nav>

このページでw3cバリデーターを試してみたところ、検証されました。私は基本的に、トレーニングのために大学のWebサイトを再作成しています。そして、このファイルはlighttpdサーバーを介して実行されます。

4

2 に答える 2

0

.navgbr-itemHTMLにネストされた要素があります。つまり、リンクをクリックするaと、とli要素の両方のイベントハンドラーがトリガーされます。ただし、a要素にはIDがないため、を取得しますundefined。

イベントハンドラーをli要素と要素の両方にバインドする代わりに、要素のみaにバインドします。li

$("li.navgbr-itm").click(function(){
  target_menu = $(this).attr("id");
  alert(target_menu);
  //$("."+target_menu).toggle();
});

HTML5data-属性は、データを保存するための優れた方法でもあります。

于 2012-10-12T22:20:47.947 に答える
0

これを試してください：

<a href="#" class="menuitem" data-target-menu="mymenu">Click Me</a>

<ul id="mymenu" style="display:none;">
    <li>Submenu 1</li>
    <li>Submenu 2</li>
    <li>Submenu 3</li>
    <li>Submenu 4</li>
</ul>

<script>
$(function() {
    $('.menuitem').click(function() {
        $('ul#' + $(this).data('target-menu')).toggle();
    }
});
</script>

$.dataここでは、 jQuery ユーティリティについて紹介します。"data-*"タグの特定の属性にデータを保存するのに役立ちます。

詳細については、jQuery ドキュメントを参照してください。

http://api.jquery.com/jQuery.data/

于 2012-10-12T18:17:18.280 に答える