当列表元素悬停在上方时,我需要显示div
,就像下拉菜单一样。
我已经有了使用jQuery实现此目的的方法,但是问题是,当我将鼠标移离列表(li
元素)时,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
)并能够与{{1 }}。当鼠标从触发它的列表元素上移开时,我不希望div
消失。
答案 0 :(得分:1)
.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>
答案 1 :(得分:0)
尝试一下:
[1, 2, [3, [4, 5]], 6]
答案 2 :(得分:0)
我认为您可以使用类似的方法来显示和隐藏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>