gpt4 book ai didi

基于点击事件的 jQuery 下拉菜单功能(隐藏帮助)

转载 作者:行者123 更新时间:2023-12-01 03:29:14 25 4
gpt4 key购买 nike

我有两个 jQuery 菜单,单击“显示”时可以正确显示。

例如,假设您有两个链接:

“演出1”、“演出2”

您点击“Show 1”,然后会出现一个带有“show 1 content”的 div

您点击“显示 2”,然后会出现一个带有“显示 2 内容”的 div

我已经做到了这一点。

显然,我需要解决一些可用性问题。如果我单击“显示 1”,然后单击“显示 2”,我希望“显示 1 的内容”消失(隐藏“显示 1 内容”div)

另一件事,如果我单击页面上的任意位置,无论哪个下拉列表处于事件状态,我都希望在单击内容框外部时隐藏它。

我的 dom 结构:

ul
li.menu
span= link_to 'Show 1'
ul.dropdown.hidden
li= link_to 'show 1 content'
li.menu
span= link_to 'Show 2'
ul.dropdown.hidden
li= link_to 'show 2 content'

我的js:

  $("#search li.menu span a").click(function(event) {
event.preventDefault();
$(this).parent().siblings("ul.dropdown").toggleClass("hidden");
});

所以基本上我只需要了解如何在单击 ul.dropdown 框外部时应用隐藏,以及如何在单击其他 ul.dropdown 框时应用隐藏

谢谢。

最佳答案

您需要将点击事件绑定(bind)到文档并检查目标(事件委托(delegate))。如果目标位于导航之外,则隐藏下拉菜单并返回。

示例:

<ul id="nav">
<li class="menu">
<span><a href="#">Show 1</a></span>
<ul class="dropdown">
<li><a href="#">Show 1 content</a></li>
</ul>
</li>
<li class="menu">
<span><a href="#">Show 2</a></span>
<ul class="dropdown">
<li><a href="#">Show 2 content</a></li>
</ul>
</li>
</ul>
<script>

var nav = $('#nav');
nav.find('ul.dropdown').hide();

$(document).bind('click', function(e) {
var target = $( e.target );
if ( target.closest('#nav').length < 1 ) {
nav.find('ul.dropdown').hide();
return;
}
if ( target.parent().is('span') ) {
var li = target.closest('li.menu');
li.siblings().find('ul.dropdown').hide();
li.find('ul.dropdown').toggle();
e.preventDefault();
}
})

</script>

关于基于点击事件的 jQuery 下拉菜单功能(隐藏帮助),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1864892/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com