Disable li with ul

Question

I'm trying to disable the parent link with child links to it using jQuery. Can anyone help me???

I want to still keep the child links active. Below is the jQuery that I'm using. I'm using the superfish menu, which I'm sure is pretty common. Any help will do!

Thank you in advance!

I'm sorry, but I'm new to this. I wasn't sure where to start. What I want to do is disable the "Tutorials" link below, but keep my Photoshop, Illustrator, and Web Design links active. I know you can just add a link to "Tutorials" and it won't be active, but is there a way to do that in jQuery? Thanks!

Home
Tutorials
- Photoshop
- Illustrator
- Web Design
Articles
- Web Design
- User Experience
Inspiration

Maybe I'm wrong, but aren't the events on the LINKS (A-tags), not the list items (LI)? — Diodeus - James MacFarlane, Jul 18 '13 at 20:19
Do we need all of this code for your problem? Can you trim it down to what is relevant? — tymeJV, Jul 18 '13 at 20:19
Could you describe your issue in a little more detail, and a little more focus? This is a bit “Here’s a bunch of code, fix it for me”, which is not what Stack Overflow is for. I don’t understand your description of what you’re trying to achieve, and I’m not clear which bit of your code to expect to achieve it, or what’s not working. — Paul D. Waite, Jul 18 '13 at 20:20
I'm sorry, but I'm new to this. I wasn't sure where to start. — user1487308, Jul 18 '13 at 20:48

score 1 · Answer 1 · edited May 23 '17 at 12:21

I am assuming your HTML is along the lines of...

(I added some classes for purposes of my answer)

<ul class="list">
   <li><a href="#">Home</a></li>
   <li class="tutorials">
      <a href="#">Tutorials</a>
      <ul>
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Illustrator</a></li>
         <li><a href="#">Web Design</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Articles</a>
      <ul>
         <li><a href="#">Web Design</a></li>
         <li><a href="#">User Experience</a></li>
      </ul>
   </li>
   <li><a href="#">Inspiration</a></li>
</ul>

You will need some type of identifier to tell jQuery to target the 'Tutorials' link. I told my statement to look at the unordered list named 'list', then any elements with the class 'tutorials' and finally the anchor that is a direct child of the preceding element 'tutorials'.

$(function() {
   $('.list .tutorials > a').on('click', function(event) {
      event.preventDefault();
      return false;
   });
});

You can refer to here for more information on th preventDefault method and the return: event.preventDefault() vs. return false

You will be able to keep the anchor wrapped around 'Tutorials' without losing your styling or click cursor. This is just one example of how you could attack this.

Disable li with ul

1 Answers1