jquery - 在悬停时创建子菜单并使其位于最顶层

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