JQuery Close/Open Multiple Toggles

Question

У меня есть переключатель в моем меню. Работаю успешно для двух ссылок, которые у меня есть. Потому что верхняя ссылка, однажды переключенная, покрывает другую ссылку, нет проблем. Но так как ссылка под ним оставляет верхнюю ссылку открытой, пользователь может щелкнуть ее и теперь открыть два переключаемых элемента и в значительной степени уложить друг на друга. Есть ли способ проверить, открыт ли другой загруженный элемент, и если да, закройте его? Благодаря!

<div class="parents-toggle"> 
<a href="#" id="customize-toggle">Customize</a><br/> 
<div class="menu-toggle hidden" id="customize-menu"> 
<div class="menu-toggle-one"> 
<h3>Background</h3> 
    <ul> 
    <li><a href="#">Dark Wood</a></li> 
    <li><a href="#">Wallpaper</a></li> 
    <li><a href="#">Bricks</a></li> 
    <li><a href="#">Planks</a></li> 
    <li><a href="#">Default</a></li> 
</ul> 
</div>  
<div class="menu-toggle-two"> 
<h3>Layout</h3> 
<ul> 
    <li><a href="#">Grid</a></li> 
    <li><a href="#">List</a></li> 
    <li><a href="#">Full</a></li> 
</ul> 
</div> 
</div> 
</div> 
<a href="/submit/">Submit video</a><br/> 
<div class="parents-toggle"> 
<a href="#" id="channels-toggle">Channels</a> 
<div class="menu-toggle hidden" id="channels-menu"> 
    <div class="menu-toggle-one"> 
    <ul> 
    <li><a href="#">Automotive</a></li> 
    <li><a href="#">Comedy</a></li> 
    <li><a href="#">Movies</a></li> 
    <li><a href="#">Weather</a></li> 
    </ul> 
</div> 
<div class="menu-toggle-two"> 
    <ul> 
    <li><a href="#">Business</a></li> 
    <li><a href="#">Commercials</a></li> 
    <li><a href="#">Music</a></li> 
    <li><a href="#">Technology</a></li> 
    </ul> 
</div> 
</div> 
</div> 
</div> 

<script> 
$("#customize-toggle").click(function() { 
$("#customize-menu").toggle(); 
}); 
$("#channels-toggle").click(function() { 
$("#channels-menu").toggle(); 
}); 
</script> 

Answer 1

Вы можете настроить JQuery немного, так как у вас уже есть menu-toggle класса по всему меню тумблеров, просто скрыть те, которые не являются ID вы хотите в обработчике щелчка, как это:

$("#customize-toggle").click(function() { 
    $(".menu-toggle:not(#customize-menu)").hide(); 
    $("#customize-menu").toggle(); 
}); 
$("#channels-toggle").click(function() { 
    $(".menu-toggle:not(#channels-menu)").hide(); 
    $("#channels-menu").toggle(); 
});​ 

You can see a demo here.

Кроме того, если вы хотите, так как ваше меню имеет последовательное расположение, вы можете иметь один обработчик щелчка, который находит тумблер Див относительно линию, нет необходимости в соответствующих идентификаторы, например:

$(".parents-toggle > a").click(function() { 
    $("div.menu-toggle").not($(this).siblings()).hide(); 
    $(this).siblings(".menu-toggle").toggle(); 
});​ 

You can see a demo of that here

и, наконец, если вы хотите немного анимации, вы можете легко добавить его с помощью .slideUp() и .slideToggle(), как это:

$(".parents-toggle > a").click(function() { 
    $("div.menu-toggle").not($(this).siblings()).slideUp(); 
    $(this).siblings(".menu-toggle").slideToggle(); 
});​ 

You can see that here :)

Answer 2

Что я делаю на моем сайте, я добавил обработчик событий к элементу тела, и я использую, что в улове-все, чтобы проверить, если открыто меню, а затем, если она есть, закрой его.