CODEWITHSUNDEEP
jqueryhtml
Juliver Galleto
Juliver Galleto

Reputation: 9037

jquery button click and hover away

ok i have this code:

<html>
<head>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function ps()
{
$('#mm').slideDown("slow");
}
$(document).ready(function(){
$('#mm').hide();
document.onclick = $('#mm').hide(); //this is not working, this one should make the '#mm' hide.
});
</script>
<body>
<button onclick="ps()" id="title" class="bb">Page settings
<ul id="mm">
<li><a href="#">Title</a></li>
<li><a href="#">meta tags</a></li>
<li><a href="#">favicon</a></li>
<li><a href="#">header settings</a></li>
</ul>
</button>
</body>
</html>

now, all i want is whenever the user click on the button('#title'), this ul('#mm') will show and of course if a user click a way or hover away on that ul, that ul will be hidden. hope someone could help, thanks in advance. im open on any suggestion. this is like a DROPDOWN MENU.

Upvotes: 0

Views: 860

Answers (3)

EnigmaMaster
EnigmaMaster

Reputation: 213

U can use the jquery toggle() function to do that
Example http://jsfiddle.net/EnigmaMaster/WgSp4/

  $('#title').click(function() {
    $('#mm').toggle();
});​

Upvotes: 0

adeneo
adeneo

Reputation: 318212

Start by closing your head section, and lots of other elements inside a button is probably not a good idea, and there's no need for inline javascript handlers for this. maybe somthing like this will work:

<!DOCTYPE html>
    <head>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#mm').hide();
                $("#title").on({
                     click: function() {
                         $('#mm').slideDown("slow");
                     },
                     mouseleave: function() {
                         $('#mm').delay(300).slideUp("slow");    
                     }
                });
            });
        </script>
    </head>
    <body>
        <button id="title" class="bb">Page settings
            <ul id="mm">
                <li><a href="#">Title</a></li>
                <li><a href="#">meta tags</a></li>
                <li><a href="#">favicon</a></li>
                <li><a href="#">header settings</a></li>
            </ul>
        </button>
    </body>
</html>​

FIDDLE

Upvotes: 0

Jamie Dixon
Jamie Dixon

Reputation: 53991

Your HTML and your Javascript are a bit screwey. You might want to validate your HTML and learn more about jQuery.

You probably just need two simple event handlers:

$('#title').click(function(){$('#mm').show()});
$('#title').mouseout(function{$('#mm').hide()});

Here's a working example

Html

<button id="title">Set Title</button>

<ul id="mm">
    <li>Title One</li>
    <li>Title Two</li>
    <li>Title Three</li>
</ul>

Css

#mm{
    display:none;
}

jQuery

$('#title').click(function(){
   $('#mm').show();
});

$('#title').mouseout(function(){
  $('#mm').hide();
});

Upvotes: 1

Related Questions