Question

根据以下代码，如果<a>具有li，如何防止锚点（ul）标签什么也不做：

<aside class="sidebar">
 <div id="leftside-navigation" class="nano">
  <ul class="nano-content">
   <li>
    <a href="index.html">
      <span>Home</span>
    </a>
   </li>
   <li class="sub-menu">
     <a href="javascript:void(0);"> 
       <span>Categories</span>
       <i class="arrow fa fa-angle-right pull-right"></i>
     </a>
     <ul>
       <li>
         <a href="index.html">
           <span>Home</span>
         </a>
       </li>
       <li>
         <a href="index.html">
           <span>Lifestyles</span>
         </a>
       </li>
       <li>
         <a href="index.html">
           <span>Technology</span>
         </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

我试图放javascript:void(0)-可以用，但是我想用if else语句或任何其他方式来制作。

我想这样做的是：

如果li.submenu具有ul li.has-submenu a可以防止出现默认情况

Answer 1

您可以为a编写选择器，该选择器是li的子菜单，具有子菜单。

$("li:has(ul) > a").click(function(e) {
    e.preventDefault();
});

Answer 2

另一种方法是通常不包括<a>标签。只需在<li class="sub-menu>内输入文本“类别”，该文本就会正常显示在菜单中。示例：

<li class="sub-menu">
       <span>Categories</span>
       <i class="arrow fa fa-angle-right pull-right"></i>
     <ul>
       <li>......

尽管如果要更改光标或要为<span>等添加下划线，则需要添加CSS。

如何选择具有特定同级元素的元素？

2 个答案: