Question

我遍布stackoverflow，似乎无法找到答案。

我正在尝试使用jquery创建一个下拉菜单。如果没有动画，当您单击按钮时菜单会下降，但是当光标移动到菜单中时菜单会消失。

有什么想法吗？

> Blockquote
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.myMenu > li').bind('click', openSubMenu);
        $('.myMenu > li').bind('mouseout', closeSubMenu);

        function openSubMenu() {
            $(this).find('ul').css('visibility', 'visible');    
        };

        function closeSubMenu() {
            $(this).find('ul').css('visibility', 'hidden'); 
        };

    });
</script>


> Blockquote

<body>
<ul class="myMenu">
    <li>
        <a href="#" ><img src = "settings.png"></a>
        <ul>
            <li><a href="#">Login</a></li>
            <li><a href="#">Edit Register</a></li>
            <li><a href="#">Edit Posts</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>
</body>
</html>


<style>
.myMenu {
    margin:0;
    padding:0;
}

.myMenu li {
    list-style:none;
    float:left;

}

    .myMenu ul {
    background-color: cccccc;
}

.myMenu li a:link, .myMenu li a:visited {
    display:block;
    text-decoration:none;
    padding: 0.5em 2em;
    margin:0;
    color:#000000;

}
.myMenu li ul {
    position:absolute;
    visibility:hidden;
    margin:0;
    padding:0;

}

.myMenu li ul li {
    display:inline;
    float:none;

}

    .myMenu li ul li a{

     border-bottom:1px solid #000000;
        border-top:1px solid #000000;
        border-left:1px solid #000000;
        border-right:1px solid #000000;
}

 </style>

Answer 1

这是一个小提琴：http://jsfiddle.net/EQQp6/ 归功于：https://stackoverflow.com/a/9823105/746817 我刚刚删除了动画，并将mouseenter更改为click。它并不完全基于您的场景，但您应该可以从这里开始。

使用Javascript：

$(document).ready(function() {
  // Menus
  $('ul.menu').hide();

  $('ul#main-nav li').click(function() {
    $('ul.menu', this).show();
  });

  $('ul#main-nav li').mouseleave(function() {
    $('ul.menu', this).hide();
  });
});

HTML：

  <ul id="main-nav">
  <li><a href="#">Click here</a>

    <ul class="menu">
        <li><a href="#">The Cure</a></li>
        <li><a href="#">Dinosaur Jr</a></li>
        <li><a href="#">Negrita</a></li>
        <li><a href="#">Ligabue</a></li>
        <li><a href="#">Dave Matthews</a></li>
     </ul>

 </li>
 <li><a href="#">No sub menu</a></li>
 <li><a href="#">Click here 2</a>
   <ul class="menu">
     <li><a href="#">Number 1</a></li>
     <li><a href="#">Number 2</a></li>
     <li><a href="#">Number 3</a></li>
     <li><a href="#">Number 4</a></li>
     <li><a href="#">Number 5</a></li>
   </ul>
 </li>

CSS：

/* Level One */
ul#main-nav   { overflow: hidden; }
ul#main-nav li  { float: left;}
ul#main-nav li a { display: block; width: 100px; height: 50px; border: 1px solid; text-align: center; line-height: 50px; padding: 10px; }

/* Level Two */
ul#main-nav ul.menu { position: absolute; }
ul#main-nav ul.menu li { float: none; }

编辑：关于直接排列所有内容的评论的解决方案：

ul { padding: 0; list-style-type: none; }

Jquery下拉菜单点击鼠标

1 个答案: