Question

我有一个HTML菜单。降价必须保持如图所示。需要在“”-link hover

上展开内容

<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”-link上盘旋时，它会用内容扩展容器。当用户将鼠标位置更改为此容器时，容器必须仍然可见。

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”-link hover上扩展容器。将光标位置更改为展开的容器时，容器必须可见。我怎么能意识到这种行为？

Answer 1

尝试这样的事情。在鼠标悬停时，如果当前项目已经可见，则不执行任何操作。否则，隐藏任何其他打开的部分并显示新部分。

python main.py config2
{'name': 'Alice'}

python main.py config1
{'name': 'Bob'}

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

这是小提琴

ttps://jsfiddle.net/7w1rts24/

在悬停

2 个答案: