jQuery: не позволяйте нажимать на родителей и детей, но разрешайте внукам

0

У меня есть список элементов, отображаемых на странице:

<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(); } );
});

Проблема в том, что я хочу, чтобы у родителей и детей были мертвые якоря, а не внуки.

Любая помощь была бы потрясающей.

  • 0
    Вы не можете проверить this.parent.parent класса this.parent.parent ?
Теги:
anchor

2 ответа

0

Сделай это:

    $(".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 то Grandchild

Если parentEls.split(",").length ==2 то child

Если parentEls.split(",").length ==2 то родительский

0

Не отличное решение, но вы можете сделать что-то вроде:

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

Или просто добавьте класс к внукам, чтобы различить их.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню