Question

我在这样的页面上显示了一个项目列表：

<ul class="product-categories">
  <li class="cat-item"><a href="#">Bathroom &amp; Plumbing</a>
    <ul class='children'>
      <li class="cat-item"><a href="#">Bathroom</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Basins &amp; Vanity Units</a></li>
          <li class="cat-item"><a href="#">Bathroom Accessories</a></li>
          <li class="cat-item"><a href="#">Baths &amp; Spas</a></li>
          <li class="cat-item"><a href="#">Tapware &amp; Showering</a></li>
          <li class="cat-item"><a href="#">Toilets, Seats &amp; Cisterns</a></li>
        </ul>
      </li>
      <li class="cat-item"><a href="#">Plumbing</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Plumbing Accessories</a></li>
          <li class="cat-item"><a href="#">Plumbing Tools</a></li>
          <li class="cat-item"><a href="#">PVC Pipe &amp; Fittings</a></li>
          <li class="cat-item"><a href="#">Solvent &amp; Silicone</a></li>
          <li class="cat-item"><a href="#">Stormwater &amp; Drainage</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="cat-item"><a href="#">Building &amp; Hardware</a>
    <ul class='children'>
      <li class="cat-item"><a href="#">Building &amp; Construction</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Doors - Internal/External</a></li>
          <li class="cat-item"><a href="#">Fencing &amp; Gates</a></li>
          <li class="cat-item"><a href="#">Insulation</a></li>
        </ul>
      </li>
      <li class="cat-item"><a href="#">Building Supplies &amp; Materials</a>
        <ul class='children'>
          <li class="cat-item"><a href="#">Bracing</a></li>
          <li class="cat-item"><a href="#">Brick Ties</a></li>
          <li class="cat-item"><a href="#">Cement &amp; Mortar</a></li>
          <li class="cat-item"><a href="#">Compounds &amp; Adhesives</a></li>
          <li class="cat-item"><a href="#">Construction Adhesives</a></li>
          <li class="cat-item"><a href="#">Dampcourse</a></li>
          <li class="cat-item"><a href="#">Metre Boxes</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

...和一些jQuery来防止锚点在点击时做任何事情：

$(document).ready(function(){
$(".cat-item a").on("click", function(e){ e.preventDefault(); } );
});

问题是我只希望父母和孩子拥有死亡的锚，而不是孙子。

任何帮助都会很棒。

Answer 1

不是一个很好的解决方案，但你可以这样做：

$(document).ready(function(){
    $(".cat-item a").on("click", function(e){
        if (!$(this).parent().parent().hasClass("cat-item"))
            e.preventDefault();
    } );
});

或者只是在孙子们身上附上一堂课来辨别他们。

Answer 2

这样做：

    $(".cat-item a").on("click", function(e){ 

            var parentEls = $(this).parents()
              .map(function() {
                if(this.tagName=="UL")
                    return this.tagName;
              })
              .get()
              .join( ", " );

             if( parentEls.split(",").length <3 ){

                e.preventDefault();     
             }


        } );

如果parentEls.split(",").length ==3那么孙子

如果parentEls.split(",").length ==2那么孩子

如果parentEls.split(",").length ==2则为父

jQuery：防止父母和孩子被点击，但允许孙子孙女

2 个答案: