2

左のナビゲーションとして、かなりの数のリンクを含む順序付けられていないリストがあります。ほとんどのリスト項目には、関連付けられたサブメニューとして別の順序付けられていないリストがあります。ただし、いくつかのリンクにはサブメニューがありません。サブメニューを持つリンクのデフォルトのクリック動作を無効にして、サブメニューをアニメーションで開くことができるようにしたいと考えています。しかし、サブメニューのないリンクでは、リンクをクリックできるようにする必要があります。私がこれをしなければならないJavaScriptは次のとおりです。

$(function(){
    if($("#leftNav ul:first > li > a").siblings().size() > 0){
        $("#leftNav ul:first > li > a").click(function(e){
            e.preventDefault();
        });
    }

問題は、兄弟リンクだけでなく、すべてのリンクのデフォルトのクリック動作が無効になることです。左側のナビゲーションの html は次のようになります

<div id="leftNav">
    <ul>
        <li>
            <a href="#">Link 1</a>
            <ul>
                <li><a href="#">Submenu Link 1</a></li>
                <li><a href="#">Submenu Link 2</a></li>
                <li><a href="#">Submenu Link 3</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
     </ul>
</div>

<ul>リンク 1 では が兄弟であるため、クリック動作を削除する必要があります。リンク 2 には兄弟がないため、そのままにしておく必要があります。

4

4 に答える 4

4

これを行う1つの方法liは、子孫を持つ要素を見つけることですul。その中で、をli見つけてaそれらをターゲットにします。

$('#leftNav li:has("ul")').find('a').each(
    function(){
        $(this).click(
            function(){
                alert("No clicking here");
                return false;
            });
    });

JSフィドルデモ。

改訂されたjQueryを追加するために編集：

$('#leftNav li:has("ul")').find('a').each(
    function(){
        $(this).click(
            function(){
                alert("No clicking here");
                return false;
            });
    });
$('#leftNav li:has("ul")').hover(
    function(){
        $(this).find('ul').slideDown();   
    },
    function(){
        $(this).find('ul').slideUp();
    });

もう少し便利なJSフィドルデモ。

于 2010-12-27T21:31:54.247 に答える
3 
 <script type="text/javascript">
  $(function () {
      $("#leftNav ul:first > li > a").each(function (a, b) {
          var t = $(b);
          //alert(t.siblings().size() );
          if (t.siblings().size() > 0) {
              t.click(function (e) {
                  e.preventDefault();
              });
          }
      });
  });
 </script>
于 2010-12-27T21:35:09.957 に答える
3

最も簡単な方法:

$("#leftNav ul:first > li > a").not(":only-child").click(function(e){
        e.preventDefault();
});
于 2010-12-27T21:36:53.983 に答える
1

コメントするのに十分な評判スコアはありませんが、チャックの答えが私にとって完璧に機能したと言いたかっただけです（FIREFOXを除く？）。私のメニューは、クリックしたメニューを開く前に、他の開いているメニューも非表示にします - 私が使用したコードは次のとおりです:

jQuery(document).ready(function($) { 
     $('ul.menu li ul.sub-menu').hide(); //Hide children by default

     $("ul.menu:first > li > a").not(":only-child").click(function(){
            event.preventDefault();
            $(this).parent().siblings().children('ul.menu li ul.sub-menu').css('display','none');
            $(this).siblings('.sub-menu').slideToggle(800);
       });
});
于 2014-01-23T15:51:37.350 に答える