Question

所有

我在下拉菜单中使用以下代码：

HTML

  <div id="mainmenu">
    <div id="Raphael" class="menuitem">Menu 1</div>
    <div id="Contact" class="menuitem">Menu 2</div>
    <div id="Contact" class="menuitem">Menu 3</div>
  </div>
<div id="submenu">Submenu</div>

JAVASCRIPT：

  $(".menuitem").hover(
    function() {
      var timeout = $(this).data("timeout");
      console.log(timeout);
      if(timeout) clearTimeout(timeout);
      console.log(this);
      $("#submenu").slideDown('fast');
    },
    function() {
      console.log(this);
      $(this).data("timeout", setTimeout($.proxy(function() {
        $('#submenu').animate({top: '-4px'}, 200); 
      }, this), 500));
  });

  $(document).click(function() {
    $('#submenu:visible').hide();
  });

CSS（这将通过CSS预处理器渲染，看起来有点不同！）：

.menuitem
  position relative
  line-height 25px
  height 25px
  display table-cell
  float left
  z-index 2
  top 0px
  background white
  border 1px solid black
  border-left 0px
  vertical-align middle
  padding 0px
  padding-left 20px
  padding-right 20px
  margin 0px
  cursor pointer
  cursor hand

#submenu
    position absolute
    width 100px
    height 100px
    font-size 12px
    text-align center
    border 1px solid black
    left 10px
    margin-top 0%
    top -4px
    background white
    z-index 2

代码工作正常，但是当我悬停子菜单时它会消失，而我预计它会显示，直到我将鼠标悬停在子菜单之外。我有什么想法可以解决这个问题吗？

由于

下拉列表包含两个带有timeOut的div

0 个答案: