Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle the display of a ul submenu only if parent li is clicked

Tags:

jquery

css

I've looked through some of the other questions on this site that I thought might help, like this one and this one, but they don't seem to answer my question. What I have is the following:

$(document).ready(function() {
	$(".has-submenu ul").hide();
  $(".has-submenu").click(function() {
  	$(this).children("ul").toggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>

As you can see from this snippet, the submenu is hidden regardless of whether I click "Item 2" or "Sub Item 1". I realize this is because "Sub Item 1" is part of the <li class="has-submenu">, so of course once it's clicked it goes through and toggles the sub menu. The CSS is doing what it's supposed to be doing, I just don't know how to tweak the CSS to say "Only hide the submenu if the parent li was clicked. I tried modifying the JQuery click function to look for $(".has-submenu a") to specify that it should only do that if that specific element was clicked, but that didn't seem to help.

I'm sure it's an easy fix, I just don't know how to do it. Thanks!

like image 808
tblznbits Avatar asked May 22 '16 21:05

tblznbits


People also ask

What is the difference between styling ul Li ul Li and submenu?

Now, the submenu dropdown is hidden, but will be exposed and become visible when we hover over its correlating parent in the navigation bar. By styling ul li ul, we have access to that submenu, and by styling ul li ul li, we have access to the individual list items within it.

How do I change the submenu style?

The submenu is just an nested unordered list. To change how the menu appear you would have to override the styles applied to them. It would probably be best to start by creating a child theme and doing a rewrite for the menu system in the style.css file. You may have to make several changes depending on how the menu is implemented.

What's the difference between main menu titles and submenu titles?

I have main menu title Travel Blog. And under this submenu titles (e.g.) 1, 2, 3 I have main menu title Social Media Tools. And under this submenu titles 4, 5, 6. Submenus are ALL blog categories linked to/added to main menu.

Why can’t I focus on the Li of a link?

This is because we can’t actually focus on the li (unless we add a tabindex="0" ). We’re actually focusing on the link ( a) within it. :focus-within allows us to still apply styles to the parent li when focusing on the link (pretty darn cool!):


1 Answers

You can use $(".has-submenu > a") for click to select a that is direct child of .has-submenu only and then use next() to target ul

$(".has-submenu ul").hide();
$(".has-submenu > a").click(function() {
  $(this).next("ul").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>
like image 164
Nenad Vracar Avatar answered Nov 28 '22 07:11

Nenad Vracar