Question

我正在使用jquery在悬停时创建一个子菜单。

这就是它的样子：

<div id="menucontainer">
  <ul id = "topmenu">
    <li><a onmouseover="javascript:show('div_1');">menu_1</a></li>
    <li><a onmouseover="javascript:show('div_2');">menu_2</a></li>
    <li><a onmouseover="javascript:show('div_3');">menu_3</a></li> # fine with onmouseover since code is generated from templates

  </ul>
  <div id="div_1" class="submenu">
    <ul>
      <li> submenu_1 </li>
      <li> submenu_2 </li>
      <li> submenu_3 </li>
    </ul>
  </div>
  <div id="div_3" class="submenu">
    <ul>
      <li> submenu_1 </li>
      <li> submenu_2 </li>
      <li> submenu_3 </li>
    </ul>
  </div>
  <div id="div_3" class="submenu">
    <ul>
      <li> submenu_1 </li>
      <li> submenu_2 </li>
      <li> submenu_3 </li>
    </ul>
  </div>
</div>
<style>
#topmenu {
  list-style: none;
}
#topmenu > li {
  display: inline-block;
}
.submenu {
  display: none;
}

<script>
function show(divid) {
  $('.submenu').css('display', 'none');
  $('#'+divid).css('display', 'block');
}
</script>

问题是，当调用show(div)并显示子菜单div时，我在“menucontainer”后面有另一个div，并且div阻止点击显示的div。我该如何解决这个问题？

Answer 1

我稍微重新构建了HTML，以简化操作。此外，最好使用事件侦听器而不是内联函数调用。如果您的情况不合适，请告诉我。

http://jsfiddle.net/Dn2mv/5

<div id="menucontainer">
    <ul id="topmenu">
        <li><a href="#">menu_1</a></li>
        <li><a href="#">menu_2</a></li>
        <li><a href="#">menu_3</a></li>
    </ul>
    <div id="div_1" class="submenu">
        <ul>
            <li>submenu_1</li>
            <li>submenu_1</li>
            <li>submenu_1</li>
        </ul>
    </div>
    <div id="div_2" class="submenu">
        <ul>
            <li>submenu_2</li>
            <li>submenu_2</li>
            <li>submenu_2</li>
        </ul>
    </div>
    <div id="div_3" class="submenu">
        <ul>
            <li>submenu_3</li>
            <li>submenu_3</li>
            <li>submenu_3</li>
        </ul>
    </div>
</div>

$('#topmenu li a').hover(function () {
    var myItem = $(this).parents('li').index() + 1;
    $('#div_' + myItem).slideDown();
}, function () {
    $('.submenu').hide();
});

在悬停时创建子菜单并使其成为最顶层

1 个答案: