How to open javascript menu with click & close with mouse out

by

Like this ?

Example.. (Just edit your element selector, if you know jQuery enough)

HTML :

<ul>
    <li>Menu#1</li>
    <span>Sub</span>
    <li>Menu#2</li>
    <span>Sub</span>
</ul>

jQuery :

$("ul li").click(function () {
    $(this).addClass("showing").next("span").show();
});

$('ul').mouseout(function() {
  $("ul li.showing").removeClass().next("span").hide();
});

Demo : http://jsfiddle.net/JcKxV/

Edited in your case… Gonna look like..

$("#theme_select").click(function() {
    if (theme_list_open == false) {
        $(".center ul li ul").addClass("showing").show();
        theme_list_open = true;
    }
    return false;
});

$("#theme_select").mouseout(function() {
  $(".center ul li ul.showing").removeClass().hide();
    theme_list_open = false;
});

or

$("#theme_select").click(function() {
    if (theme_list_open == false) {
        $(".center ul li ul").show();
        theme_list_open = true;
    }
    return false;
});

$("#theme_select").mouseout(function() {
    if (theme_list_open == true) {
      $(".center ul li ul").hide();
        theme_list_open = false;
    }
});

More Related Contents:

  1. How to get children id when I click the parent?
  2. Change background image php loop [closed]
  3. Show/hide ‘div’ using JavaScript
  4. $(document).click() not working correctly on iPhone. jquery [duplicate]
  5. Uncaught ReferenceError: function is not defined with onclick
  6. Get the contents of a table row with a button click
  7. HTML tag want to add both href and onclick working
  8. Javascript onclick function is called immediately (not when clicked)?
  9. Onclick event not firing on jsfiddle.net [closed]
  10. Onclick javascript to make browser go back to previous page?
  11. javascript onclick event over flash object
  12. Leaflet- marker click event works fine but methods of the class are undefined in the callback function
  13. How to completely DISABLE any MOUSE CLICK
  14. Changing button text onclick
  15. Javascript – Dynamically assign onclick event in the loop
  16. Missing click event for inside element on firefox
  17. addEventListener vs onclick
  18. CSS Animation onClick
  19. javascript onclick happening on page load
  20. Change CSS properties on click
  21. How can I stop an onclick event from firing for parent element when child is clicked?
  22. Change image source with JavaScript
  23. How to add click event to an element?
  24. onclick() and onblur() ordering issue
  25. Calling onclick on a radiobutton list using javascript
  26. getElementsByClassName to change the style of elements when event occurs [duplicate]
  27. Simulating a click in jQuery/JavaScript on a link
  28. onClick Function “this” Returns Window Object
  29. How to track a Google Adwords conversion onclick?
  30. onclick=”location.href=’link.html'” does not load page in Safari

Leave a Comment