Question

我有这样的html文件：

<div id = "aseaza-menu">

<div class ="menu" >Audio,Video </div><br>
<div class ="menu" >Electrocasnice</div><br>
<div class ="menu" >Ingrijire personala</div><br>
<div class ="menu" >PC</div><br>
<div class ="menu" >Tablete,Telefoane</div><br>

</div>
<div id="box">
<table id = "produse">
<tbody>

</tbody>

包含更多div的div 和这样的JavaScript文件：

$(function(){


$("#aseaza-menu").on('mouseover', function(){

$("#box").slideToggle(600);

});
 $("#aseaza-menu").on('mouseout', function(){
    $("#box").hide();
});
});

我希望一旦鼠标悬停在“aseaza-menu”div上，我希望它能够滑动切换并停止，无论是什么，我的鼠标悬停在它的元素上。但它改为：鼠标悬停“aseaza-menu”div，“box”div slide Toggles但如果我将鼠标移动到其中一个元素如“Audio，Video”上，则该过程将重新开始（“box”div div隐藏并再次滑动）。是否有任何方法在div上应用slideToggle方法及其内容？对不起，我的英文，谢谢！

Answer 1

试试这个：

// Slidetoggle when hovering over parent and children
$('#aseaza-menu').on('mouseover', function(){
  $('#box').slideToggle(600);
});

// When no longer hovering parent div, hide box again
$('#aseaza-menu').on('mouseout', function(){
    $('#box').hide();

// But don't hide box when no longer hovering children
}).children().on('mouseout', function(e) {
  return false;
});

如果您不想在不再悬停儿童时隐藏该框，请用

替换底部的3行代码

});

你的问题不是很清楚，但这是我的代码，基于我能从中理解的内容。

div及其内容切换

1 个答案: