Question

我正在尝试创建一个下拉菜单。

但我无法在mouseout上隐藏子菜单项。

它隐藏在每一个动作

我的jQuery代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('ul ul').hide();
        $('ul li.top_menu_first a').removeAttr("href");
        $('ul li.top_menu_first > a').mouseover(function(event) {
            $(this).parent().find('ul').show('slow');
        });

        $('ul li.top_menu_first ul').mouseout(function(event) {
            $('ul ul').hide('slow');
        });
    });
</script>

我的HTML代码：

<div id="top_menu">
    <ul>
        <li class="top_menu_first"><a href="http://google.com">ABC</a>
            <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>DEF</a></li>
        <li class="top_menu_first"><a>GHI</a></li>
        <li class="top_menu_first"><a>JKL</a>
            <ul>
                <li><a>4</a></li>
                <li><a>5</a></li>
                <li><a>6</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>MNO</a>
            <ul>
                <li><a>7</a></li>
                <li><a>8</a></li>
            </ul>
        </li class="top_menu_first">
    </ul>
</div>
<div id="footer"></div>

如果有人可以提供帮助

Answer 1

您的代码会跟踪子菜单mouseOut。我假设您希望子菜单在从菜单名称鼠标移出时隐藏。

删除ul 来自$('ul li.top_menu_first ul').mouseout(function(event) {（ http://jsfiddle.net/qgbtd/）确保在HTML中加载jquery 也像评论说使用mouseleave()给它一个更好的行为

Answer 2

我认为你不需要jQuery。首先尝试使用CSS，这是合乎逻辑的步骤。如果你需要动画使用CSS3过渡，而jQuery就像旧浏览器的后备，如果你真的需要动画，否则只是让它，旧浏览器不会动画不透明度，没什么大不了的。

演示： http://jsbin.com/uqebor/9/edit

ul.menu,
ul.menu ul {
  position: relative;
  list-style: none;
  padding: 0;
  -webkit-transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
}
ul.menu li {
  margin: 1px 0;
}
ul.menu > li {
  float: left;
  margin: 0 .5em;
}
ul.menu a {
  text-decoration: none;
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid black;
  background: white;
}
ul.menu ul {
  visibility: hidden;
  height: 0;
  width: 0;
  opacity: 0;
}
ul.menu li:hover ul {
  width: auto;
  height: auto;
  visibility: visible;
  opacity: 1;
}

ul li使用jQuery显示/隐藏

2 个答案: