CODEWITHSUNDEEP
javascriptjquerymenu
user9885547
user9885547

Reputation:

How can I select elements having specific siblings?

How can I prevent anchor (<a>) tag from doing nothing if li has ul according to the following code:

<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>

I've tried to put javascript:void(0) - it works but I wanted to make it with if else statement or any other way.

I wanted to do that is:

Upvotes: 0

Views: 42

Answers (3)

Rakesh
Rakesh

Reputation: 505

You can also try this. 

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

Upvotes: 0

sebastian lavenant
sebastian lavenant

Reputation: 25

Another approach would be to not include the <a> tag in general. Just write the the text "Categories" within the <li class="sub-menu> and it will display in menu as normal. Example: 

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

Although you would need to add CSS if you want the cursor to change or if you want the text to be underlined for your <span> etc...

Upvotes: 0

Barmar
Barmar

Reputation: 782498

You can write a selector for a that's a child of an li that has a submenu.

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

Upvotes: 2

Related Questions