show when clicked and then hide when clicked again

Juliver Galleto Published at Dev

Juliver Galleto

how to bind same functions but different arguments given?

I'm making a dropdown stuff and I'm trying to hide the submenu when parent is click again (refer below)

when click then show submenu and then when click again and the submenu is displayed already then hide it.o

What I'm currently tried so far (refer below)

jquery

$( ".has_sub" ).bind({
    click: function() { //when click and sub is not displayed yet
        $(this).find('.sub').slideDown();
    }, click: function() { //when click and sub is displayed already
        $(this).find('.sub').hide();
    }
});

html

<ul>
    <li class="has_sub">
        <a href="#">Menu 1</a>
        <ul class="sub">
            <li>sub menu 1</li>
            <li>sub menu 2</li>
        </ul>
    </li>
</ul>

Arun P Johny

In your case since you have used the same key twice, the object will have only one property with the value as the value of the last item, so only one handler - the one that hides will get registered.

Since you want to toggle the display with slide animation you can use slideToggle()

$(".has_sub").on('click', function() {
  $(this).find('.sub').stop().slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="has_sub">
    <a href="#">Menu 1</a>
    <ul class="sub">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
    </ul>
  </li>
</ul>

Collected from the Internet

Please contact [email protected] to delete if infringement.