Создать несколько выпадающих меню/selectbox jQuery

Question

Эта цель предназначена для создания сценария, который может использоваться с несколькими выпадающими списками на одной странице. Содержимое выпадающих списков различно (pics, lists и т. Д.), Поэтому этот раздел будет посвящен только раскрывающимся элементам (open/close/style).

Я создаю выпадающие списки, используя три div и два разных класса стиля, которые переключаются (в зависимости от того, открыт ли раскрывающийся список или нет).

Я нахожусь в середине процесса выяснения того, как сделать только одно div-шоу сразу, поэтому, если одно раскрывающееся меню открыто и какое-то другое выпадающее меню нажата, первое открытое должно автоматически закрываться (скрываться). Я новичок в jQuery, поэтому вся помощь очень ценится, было бы здорово, если бы вы могли оставить комментарий в коде, чтобы я получил его и узнал.

Так выглядит код. Я изменяю сценарий, с которым я получил помощь раньше.

http://jsfiddle.net/yup2s/1/

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

1: Щелкните по метке или вне div (на странице), которая используется при наличии нескольких настроек в раскрывающемся списке так много кликов можно сделать в раскрывающемся списке перед закрытием. 2: Нажмите на метку внутри или вне div (когда div работает как selectbox).

Извините за плохой английский.

Answer 1

Посмотрите на эту скрипку: http://jsfiddle.net/yup2s/4/

В той части, где «при нажатии на кнопку один, другой близкий», я просто добавил эти 2 строки в, если заявление:

$('.style_active').siblings('[id^=drop_]').hide(); 
$('.style_active').removeClass("style_active"); 

Тогда для второго запроса, я добавил функцию документа нажмите:

$(document).click(function(){ 
    $('.style_active').siblings('[id^=drop_]').hide(); 
    $('.style_active').removeClass("style_active"); 
}) 

Но есть новая проблема, так как ваши выпадающая является частью документа, когда вам нажмите на кнопку, она сразу же закрывается. Вам нужно остановить pragation на выпадающем меню, щелкнув по этому адресу:

$("div").on('click', function (e) { 
    e.stopPropagation(); 
}