1

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

但我无法让子菜单项在鼠标悬停时隐藏。

一举一动都隐藏起来

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

请如果有人可以帮助

4

2 回答 2

1

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

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

于 2012-10-13T22:53:56.353 回答
0

我认为您不需要为此使用 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;
}
于 2012-10-13T23:20:38.010 回答