, die an anderer Stelle schließt

Question

Ich habe diese Probe zu klicken:

jQuery('.account strong').click(function(e){ 
 
    jQuery(this).parent('div').addClass('show'); 
 
    jQuery('.account-dropdown').slideToggle(200); 
 
});

.account-dropdown{ 
 
    background: #fff; 
 
    border-radius: 0 3px 3px 3px; 
 
    box-shadow: 2px 3px 7px #555; 
 
    display: none; 
 
    left: 0; 
 
    padding: 10px; 
 
    position: absolute; 
 
    text-align: left; 
 
    top: 46px; 
 
    width: 145px; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="account"> 
 
    <strong>Your account</strong> 
 
    <div class="account-dropdown"> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
    </ul> 
 
    </div> 
 
</div>

Ich möchte mein Skript so ändern, wenn Sie es öffnen, kann das Menü überall geschlossen werden.

Zum Beispiel, wenn das gerade geöffnete Menü nur schließt, wenn wir auf ".account strong ' klicken.

Ich möchte das Menü überall von weniger div 'account-dropdown' geschlossen werden.

Sie können mir helfen, dieses Problem zu lösen bitte?

Vielen Dank im Voraus!

Answer 1

Sie unter Code verweisen können:

$('.account strong').click(function(e) { 
 
    $(this).parent('div').addClass('show'); 
 
    $('.account-dropdown').slideToggle(200); 
 
    e.stopPropagation(); 
 
}); 
 

 
$(document).on('click', function(e) { 
 
    if ($('.account-dropdown').is(":visible")) { 
 
    if ($(e.target).closest(".account-dropdown").length === 0) { 
 
     $('.account-dropdown').slideToggle(200); 
 
    } 
 
    } 
 
});

.account-dropdown { 
 
    background: #fff; 
 
    border-radius: 0 3px 3px 3px; 
 
    box-shadow: 2px 3px 7px #555; 
 
    display: none; 
 
    left: 0; 
 
    padding: 10px; 
 
    position: absolute; 
 
    text-align: left; 
 
    top: 46px; 
 
    width: 145px; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="account"> 
 
    <strong>Your account</strong> 
 
    <div class="account-dropdown"> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
    </ul> 
 
    </div> 
 
</div>