CODEWITHSUNDEEP
jqueryhtmlcss
Ty Yt
Ty Yt

Reputation: 466

Show/Hide ul li onclick jquery

I'd like to show/hide my submenus when a <a href="#"></a> is clicked. Here is a code example :

<ul>
    <li><a href="www.example.com">Test</a></li>
    <li><a href="www.example.com">Test</a></li>
    <li class="submenu">
        <a href="#">Test 2</a>
        <ul class="ul_submenu">
            <li><a href="www.example.com">Test</a></li>
            <li><a href="www.example.com">Test</a></li>
            <li class="submenu_2">
                <a href="#">Test 3</a>
                <ul class="ul_submenu_2">
                    <li><a href="www.example.com">Test</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

$( 'li.submenu a[href="#"]').click(function(e) {
    e.preventDefault();
    $("ul.ul_submenu").css("display","block");
}, function() {
    $("ul.ul_submenu").css("display","none");
});

You can find a JSFiddle.

I need to allow click on a tag when there are children elements, and modify the display of li. But I need to cancel the page reload when user clicks on a tag like this : <a href="#"></a>

Upvotes: 0

Views: 17165

Answers (5)

Jez D
Jez D

Reputation: 1487

I changed your jquery to this:

$('li.submenu').on('click','a[href="#"]',function(e){ e.preventDefault(); $("ul.ul_submenu").toggle(); })

and it seems to work. Fiddle: https://jsfiddle.net/y0p13dt7/1/

Upvotes: 0

Eugene
Eugene

Reputation: 1170

This code will open "Test2" submenu:

$('li.submenu a[href="#"]').click(function(e) {
   e.preventDefault();
   $(this).parent().children("ul.ul_submenu").show();
});
.ul_submenu {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu_2"><a href="#">Test 3</a>
        <ul class="ul_submenu_2">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

You can do,

$('li a').click(function(e) {
  e.preventDefault();
  $(this).closest("li").find("[class^='ul_submenu']").slideToggle();
});

Fiddle

Upvotes: 5

eisbehr
eisbehr

Reputation: 12462

Just return false in the click callback. And click() only has one callback function, not two. What was your plan?

And you dont need to use css(), just use show().

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $("ul.ul_submenu").show()
        return false;
    });
});

And you should make it more dynamically. Somhow like this, for all menu entries. I've edited your fiddle: https://jsfiddle.net/sy757gvj/5/

<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu"><a href="#">Test 3</a>
        <ul class="ul_submenu">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

-

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $(this).next().toggle();
        return false;
    });
});

Upvotes: 1

Dilip Nayak
Dilip Nayak

Reputation: 301

You can use toggle function for the same. 

$(document).ready(function(){
    $('li.submenu a[href="#"]').click(function(){
        $("ul.ul_submenu").toggle();
    });
});

Upvotes: 0

Related Questions