Jquery下拉菜单单击和鼠标悬停答案

【问题标题】：Jquery Drop Down Menu click and mouseoutJquery下拉菜单单击和鼠标悬停
【发布时间】：2014-07-17 16:24:38
【问题描述】：

我查看了整个 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>

【问题讨论】：

将光标移入或移出菜单时，您希望它消失吗？

标签： jquery menu

【解决方案1】：

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

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

【讨论】：

哇，非常感谢！！这很好用。现在只需要弄清楚如何将菜单放在按钮下方！
我添加了对齐所需的 css 也更新了 jsfiddle。归功于：stackoverflow.com/a/9621023/746817
非常感谢您所做的一切！