Question

好的我有这个代码：

<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>

现在，我想要的只是当用户点击按钮（'＃title'）时，这个ul（'＃mm'）会显示，当然如果用户点击某个方式或者在那个ul上徘徊， ul将被隐藏。希望有人可以提前帮助，谢谢。我打开任何建议。这就像一个DROPDOWN MENU。

Answer 1

你的HTML和你的Javascript有点screwey。您可能希望验证HTML并了解有关jQuery的更多信息。

您可能只需要两个简单的事件处理程序：

$('#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();
});

Answer 2

首先关闭你的头部，按钮内的许多其他元素可能不是一个好主意，并且不需要内联javascript处理程序。也许这样的事情会起作用：

<!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

Answer 3

你可以使用jquery toggle（）函数来做到这一点示例http://jsfiddle.net/EnigmaMaster/WgSp4/

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

jquery按钮单击并将鼠标悬停

3 个答案: