Javascript 单击“不正常工作”,下拉所有菜单
我正在为我的网站制作一个点击脚本的下拉列表,但它并没有按照我想要的方式工作。() 当我点击按钮1时,按钮2也会下降。我不要这个 页面代码如下:Javascript 单击“不正常工作”,下拉所有菜单,javascript,jquery,html,dropdownbox,Javascript,Jquery,Html,Dropdownbox,我正在为我的网站制作一个点击脚本的下拉列表,但它并没有按照我想要的方式工作。() 当我点击按钮1时,按钮2也会下降。我不要这个 页面代码如下: <TABLE BORDER="0" align="center"> <TR><TD> <div class="click-nav"> <ul class="no-js"> <li> <div class="button_blazer"><a class="
<TABLE BORDER="0" align="center">
<TR><TD>
<div class="click-nav">
<ul class="no-js">
<li>
<div class="button_blazer"><a class="clicker"><font color="white">VANCED (Producer / DJ) </font></a></div>
<ul>
<li class="button_content">
<div class="soundcloud"><center><b><a href="http://www.soundcloud.com/vanced" target="_new">SOUNDCLOUD</a></b></center></div>
<div class="facebook"><center><b><a href="https://www.facebook.com/vanceddubstep" target="_new">FACEBOOK</a></center></div>
<br><br>
<u>UPCOMING EVENTS:</u><br>
<a href="https://www.facebook.com/events/1411434522422784" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
18/04/2014 - BLAZEBASS 2<br>
<a href="https://www.facebook.com/events/708468632520791" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
25/04/2014 - DUBSTEP RIDDIM SESSION/PLAN B (Moscow)<br>
<a href="https://www.facebook.com/events/282338108583569" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
09/05/2014 - 30.000 WATTS<br>
<a href="https://www.facebook.com/events/286445134839854" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
23/05/2014 - DUBNIUM<br>
<br>
<u>PAST EVENTS:</u><br>
<a href="https://www.facebook.com/pages/Dubconscious/124580511077196?fref=ts" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
20/12/2013 - DUBCONSCIOUS 3<br>
<a href="https://www.facebook.com/blazebass" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
18/04/2013 - BLAZEBASS 1<br>
</li></ul></li></ul>
</div>
</TD><TD>
<div class="click-nav" STYLE="margin-left: 10px;">
<ul class="no-js">
<li>
<div class="button_blazer"><a class="clicker"><font color="white">VANCED (Producer / DJ) </font></a></div>
<ul>
<li class="button_content">
<div class="soundcloud"><center><b><a href="http://www.soundcloud.com/vanced" target="_new">SOUNDCLOUD</a></b></center></div>
<div class="facebook"><center><b><a href="https://www.facebook.com/vanceddubstep" target="_new">FACEBOOK</a></center></div>
<br><br>
<u>UPCOMING EVENTS:</u><br>
<a href="https://www.facebook.com/events/1411434522422784" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
18/04/2014 - BLAZEBASS 2<br>
<a href="https://www.facebook.com/events/708468632520791" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
25/04/2014 - DUBSTEP RIDDIM SESSION/PLAN B (Moscow)<br>
<a href="https://www.facebook.com/events/282338108583569" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
09/05/2014 - 30.000 WATTS<br>
<a href="https://www.facebook.com/events/286445134839854" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
23/05/2014 - DUBNIUM<br>
<br>
<u>PAST EVENTS:</u><br>
<a href="https://www.facebook.com/pages/Dubconscious/124580511077196?fref=ts" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
20/12/2013 - DUBCONSCIOUS 3<br>
<a href="https://www.facebook.com/blazebass" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
18/04/2013 - BLAZEBASS 1<br>
</li></ul></li></ul>
</div>
</TD></TR>
</TABLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
// Clickable Dropdown
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});
</script>
-
即将举行的活动:
2014年4月18日-BLAZEBASS 2
2014年4月25日-DUBSTEP-RIDDIM会议/计划B(莫斯科)
2014年5月9日-30000瓦
2014年5月23日-都柏林
过去的事件:
2013年12月20日-3日
2013年4月18日-BLAZEBASS 1
-
即将举行的活动:
2014年4月18日-BLAZEBASS 2
2014年4月25日-DUBSTEP-RIDDIM会议/计划B(莫斯科)
2014年5月9日-30000瓦
2014年5月23日-都柏林
过去的事件:
2013年12月20日-3日
2013年4月18日-BLAZEBASS 1
$(函数(){
//可点击下拉列表
$('.单击nav>ul').toggleClass('no-js');
$('.click nav.js ul').hide();
$('.click nav.js')。单击(函数(e){
$('.单击nav.js ul')。滑动切换(200);
$('.clicker')。toggleClass('active');
e、 停止传播();
});
$(文档)。单击(函数(){
如果($('.click nav.js ul')。是(':visible')){
$('.click nav.js ul',this.slideUp();
$('.clicker').removeClass('active');
}
});
});
您可以通过e.currentTarget
访问单击的元素,因此您可以将侦听器更改为以下内容:
$('.click-nav .js').click(function(e) {
$('ul', e.currentTarget).slideToggle(200);
$('.clicker', e.currentTarget).toggleClass('active');
e.stopPropagation();
});
这样做的目的是将“ul”和“.clicker”之后的搜索限制在实际单击的区域
另外,作为提示,您应该在代码中使用缩进,因为它很难阅读。什么不起作用?单击处理程序是否被触发?您是否仍在体验旧的行为?它们不再下拉,当我单击其中一个框时不会发生任何事情。我已编辑了上面的代码并修复了第一个选择器。非常感谢,它可以工作!你知道我该怎么解决这两个箱子不能同时放下的问题吗。就像你在点击按钮2后点击按钮1,然后按钮2滑回,明白吗?