展开悬停内容

Question

我有一个html菜单。降价必须保持如图所示。需要扩展“” - 链接悬停的内容

<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代码必须在 “格” -link悬停扩大容器。将光标位置更改为展开的容器时，容器必须可见。我怎样才能认识到这种行为？

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

Answer 2

其实，你可以用简单的css，使用max-height和overflow（隐藏）来做这个菜单。

<div class="menu-container"> 
<div class="visible-content"> 
    My menu 
</div> 
<div class="invisible-content"> 
<div class="content-of-invisible-div"> 
<ul> 
<li>My first item</li> 
<li>My second item</li> 
<li>My third item</li> 
</ul> 
</div> 

</div> 

.menu-container:hover .invisible-content { 
    max-height: 100px 
} 
.invisible-content{ 
    max-height: 0px; 
    overflow: hidden; 

} 
.visible-content{ 
    background-color: red; 
    padding: 10px; 
} 
.content-of-invisible-div { 
    background-color: blue; 
} 

下面是使用`onmouseover`小提琴

ttps://jsfiddle.net/7w1rts24/