Jquery - Закрыть выпадающий/удалить активный класс при нажатии снаружи или нажав другой выпадающий список

Question

Я только что создал свой собственный JQuery плагин и у меня есть выпадающий список, который Переключите «активный» класс при нажатии себя

, и я просто хочет " активный»класс будет удалить при нажатии вне элемента или нажав другое ниспадающее меню и каждый ниспадающего меню имеет различные наценки, но с тем же классом, и я инициализируюсь их всех с помощью JQuery по телефону:

$('.dropdown').dropdown(); 

эта вещь аналогичный внешний вид выпадающего списка Bootstrap

вот мой код:

<style> 
.dropdown { 
position:relative; 
display:inline-block; 
} 
.dropdown > button { 
padding:6px 12px; 
border-radius:4px; 
border:1px solid #bbb; 
background:linear-gradient(#fff 5% , #ddd 100%); 
} 

.dropdown.active > button, 
.dropdown > button:active { 
background:#ddd; 
box-shadow:inset 0px 3px 6px rgba(0,0,0, 0.125); 
} 

.dropdown > ul { 
margin:0; 
list-style:none; 
padding:0; 
} 

.dropdown > .menu { 
border:1px solid #ddd; 
border-radius:4px; 
position:fixed; 
top:65px; 
display:none; 
} 
.dropdown > .menu li , 
.dropdown > .menu .item { 
padding:6px 12px; 
min-width:100px; 
font-weight:bold; 
} 

.dropdown.active > .menu { 
-webkit-transform:none; 
display:inline-block; 
} 

</style> 


<script> 
(function($) { 
$.fn.dropdown = function() { 
var dropdown = this; 
dropdown.find('button').click(function() { 
$(this).parent('.dropdown').toggleClass('active'); 
}); 

} 
})(jQuery); 
</script> 
<script> 
$('.dropdown').dropdown(); 
</script> 


<div class="dropdown"> 
<button>Open</button> 
<div class="menu"> 
<div class="item">One</div> 
<div class="item">Two</div> 
<div class="item">Three</div> 
<div class="item">Four</div> 
<div class="item">Five</div> 
</div> 
</div> 

<div class="dropdown"> 
<button>Open</button> 
<ul class="menu"> 
<li>One</li> 
<li>Two</li> 
<li>Three</li> 
<li>Four</li> 
<li>Five</li> 
</ul> 
</div> 

Answer 1

Вы можете сначала закрыть все спады капли ожидают щелкнул один, затем активный/открыть в настоящее время щелкнул выпадающий:

var p = $(this).parent(); 
$('.dropdown').not(p).removeClass('active'); 

закрыть падение падения при нажатии на улице:

$(window).click(function() { 
    $('.dropdown').removeClass('active'); 
}); 

И, чтобы предотвратить в том числе ниспадающего себя по выше код:

$('.dropdown').click(function(event){ 
    event.stopPropagation(); 
}); 

Вот демо: https://jsfiddle.net/huvzb305/3