Home/ Questions/Q 7841621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T16:08:17+00:00

ok i have this code: <html> <head> <script src=js/jquery.js></script> <script type=text/javascript> function ps() {

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0