0

好的，我有这个代码：

<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将是隐。希望有人可以提供帮助，在此先感谢。我对任何建议持开放态度。这就像一个下拉菜单。

4

3 回答 3

1

你的 HTML 和你的 Javascript 有点古怪。您可能想要验证您的 HTML 并了解有关 jQuery 的更多信息。

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

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

这是一个工作示例

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();
});
于 2012-04-26T15:51:08.237 回答
0

首先关闭您的 head 部分，按钮内的许多其他元素可能不是一个好主意，并且不需要内联 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>​

小提琴

于 2012-04-26T15:59:54.493 回答
0

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

  $('#title').click(function() {
    $('#mm').toggle();
});​
于 2012-04-26T16:16:20.233 回答