javascript - 悬停时展开内容

Question

我有一个 html 菜单。 Markdown 必须保持如图所示。需要在“”-链接悬停上展开内容

<div class="container">
  <div class="first-div-in row-menu" data-menu-block="first-div-in">Title</div>
      ..some other buttons..
</div>
<div id="first-div-in" class="menu-in">
  <div class="container" style="display:none;">
    <div class="col-xs-10">
      ... here is content ...
    </div>
  </div>
</div>

问题在于实现。这个想法是，当用户将鼠标悬停在“div”链接上时，它会扩展包含内容的容器。当用户将鼠标位置更改为该容器时，该容器必须仍然可见。

JS:

var hover_menu = function() {
  var parent = $(this);
  var menu_block = $( parent ).data('menu-block');
  $('#' + menu_block).slideToggle('slow');
}
$('.row-menu').on( 'hover', hover_menu );

我的 JS 代码必须在“div”链接悬停时展开容器。将光标位置更改为展开的容器时，容器必须可见。我怎样才能实现这种行为？

Answer 1

尝试这样的事情。在鼠标悬停时，如果当前元素已经可见，则什么都不做。否则，隐藏任何其他打开的部分并显示新的部分。

var hover_menu = function(){
    var $parent = $(this);
    var $menu_block = $('#' + $parent.data('menu-block'));


    if ($menu_block.not(':visible')) {
       $('.menu-in:visible').not($menu_block).slideOut('slow');
       $menu_block.slideIn('slow');
    }
}
$('.row-menu').on( 'mouseover', hover_menu );