[英]Removing class on one div when other is clicked
Following is my HTML, 以下是我的HTML,
<div class="container">
<ul class="navbar">
<li class="nb-link"><a>Home</a></li>
<li class="dropdown">
<a>CBSE</a>
<ul class="dropdown-menu">
<li>10th Standard</li>
<li>12th Standard</li>
</ul>
</li>
<li class="dropdown">
<a>Engineering</a>
<ul class="dropdown-menu">
<li>JEE - Main</li>
<li>JEE - Advanced</li>
</ul>
</li>
</ul>
I have 2 dropdowns . 我有2个下拉菜单。 When I click one, it comes down. 当我单击一个时,它就会下降。 But when I click another, even that comes down without closing the previous one . 但是,当我单击另一个时,即使没有关闭前一个,它也会下降。 This creates an overlap. 这会产生重叠。 The way I'm handling this using JS is as follows 我使用JS处理此问题的方式如下
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$('.navbar').$this.children('.dropdown-menu').removeClass('open');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').addClass('open');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
How can I achieve a functionality using JS such that the previous dropdown closes when I click a new dropdown ? 如何使用JS实现功能,以便在单击新下拉菜单时关闭上一个下拉菜单? Also, the dropdowns should close when anywhere on the page is clicked ? 另外,单击页面上的任意位置时,下拉列表应关闭。
can try this 可以试试这个
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$('.dropdown').not($this).removeClass('active')
$('.dropdown-menu').not($this.find('.dropdown-menu')).removeClass('open');
$this.toggleClass('active');
$this.find('.dropdown-menu').toggleClass('open');
});
});
this is a function you can use if selectors is not target 如果选择器不是目标,则可以使用此功能
// function for if selectors not target
function actionwindowclick(e , selector , action){
if (!$(selector).is(e.target) // if the target of the click isn't the container...
&& $(selector).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
and you can use it in window click event like this 你可以在像这样的窗口点击事件中使用它
$(window).on('click', function(e){
actionwindowclick(e , ".dropdown , .dropdown-menu" , function(){
$('.dropdown').removeClass('active')
$('.dropdown-menu').removeClass('open');
});
});
Note: I think you may need to event.stopPropagation() while you trying to click on .dropdown-menu itself 注意:我认为您可能需要在尝试单击.dropdown-menu本身时使用event.stopPropagation()
$('.dropdown-menu').click(function(e) {
e.stopPropagation()
});
尝试:
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$this.children('.dropdown-menu').toggleClass('open');
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.