当列表元素悬停在上方时,我需要显示div
,有点像下拉菜单。
我已经有了使用jQuery的方法,这是我想要的,但是问题是当我将鼠标移离列表(li
元素)时,div
消失了。我希望能够将鼠标从列表元素移至div,并能够与div中的元素进行交互。
这将通过单击功能解决,但我不想使用单击,因为div上的元素将包含锚链接,单击时会将用户带到页面的下方,因此您可以看到单击功能如何显示和显示。保持div不是一个好主意,除非单击div的内容(锚链接)时能找到一种方法来关闭div。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.nav-item-dropdown {
position: absolute;
/* other styles ... */
}
</style>
<div class="nav-wrap">
<ul>
<li id="nav-item1" class="nav-item-wrap">Services</li>
<li id="nav-item2" class="nav-item-wrap">Projects</li>
</ul>
</div>
<div class="nav-item-dropdown nav-item1-dropdown">
<!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>
<script>
$(document).ready(function() {
jQuery('#nav-item1').hover(function() {
$('.nav-item1-dropdown').toggle();
});
jQuery('#nav-item2').hover(function() {
$('.nav-item2-dropdown').toggle();
});
});
</script>
我希望能够将鼠标从列表元素(.nav-item-wrap
)移至div
(.nav-item-dropdown
),并能够与div
中的元素进行交互。当我将鼠标从触发它的列表元素上移开时,我不希望div
消失。
.toggle()
方法仅切换元素的可见性。在您的代码中,它们干得很好。在您的情况下,不要像下面那样使用.show()
和.hide()
进行切换。加载时需要附加的class
隐藏div
。
$(document).ready(function() {
jQuery('#nav-item1').hover(function() {
$('.nav-item1-dropdown').show();
$('.nav-item2-dropdown').hide();
});
jQuery('#nav-item2').hover(function() {
$('.nav-item2-dropdown').show();
$('.nav-item1-dropdown').hide();
});
});
.nav-item-dropdown {
position: absolute;
/* other styles ... */
}
.yourClass {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrap">
<ul>
<li id="nav-item1" class="nav-item-wrap">Services</li>
<li id="nav-item2" class="nav-item-wrap">Projects</li>
</ul>
</div>
<div class="nav-item-dropdown nav-item1-dropdown yourClass">
div1
<!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>
<div class="nav-item-dropdown nav-item2-dropdown yourClass">
div2
<!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>
尝试一下:
$(document).ready(function(){
jQuery('#nav-item1').mouseover(function() {
$('.nav-item1-dropdown').show();
});
jQuery('#nav-item2').mouseover(function() {
$('.nav-item2-dropdown').show();
});
});
我认为您可以使用类似的方法来显示和隐藏div
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="nav-wrap">
<ul>
<li id="nav-item1" class="nav-item-wrap">Services</li>
<li id="nav-item2" class="nav-item-wrap">Projects</li>
</ul>
</div>
<div class="nav-item-dropdown nav-item1-dropdown" style="display:none">
<p>your action goes here</p>
</div>
<script>
$(document).ready(function() {
jQuery('.nav-wrap').hover(function() {
$('.nav-item1-dropdown').show();
});
$('.nav-item1-dropdown').hide(); //use it wherever you need to hide it
});
</script>