Как скрыть элемент с такой же разметкой через jquery?

Question

У меня есть два пользовательских выпадающих списка с одинаковой разметкой. Мне нужно иметь только одно шоу за раз. Прямо сейчас я могу открыть оба одновременно. Оба должны также закрыться, когда я щелкаю по списку.

Требуется одинаковая разметка для обоих списков, поэтому я не могу использовать уникальные идентификаторы или дополнительные классы, чтобы это произошло.

Вот ссылка на мой пример скрипки: http://jsfiddle.net/dg7Lc/29/

Любая помощь будет принята с благодарностью, спасибо!

-Д

Answer 1

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

$(document).click(function(ev){
    if(!$(ev.target).is('.custom-select span')){ $('.custom-select').find('ul').slideUp('fast'); }
});

Обновлен JSFiddle

Answer 2

http://jsfiddle.net/dg7Lc/31/

В основном закрытие остальных:

$('.custom-select').not(this).find('ul').slideUp('fast');

И для закрытия при нажатии вне поля я использовал этот фрагмент кода, но он немного грязный:

$("body").click(function(e) {
    var should = true;
    for($e = $(e.target); should && $e.length; $e = $e.parent()) {
        should = !$e.is(".custom-select");
    }
    if(should) {
        $('.custom-select').find('ul').slideUp('fast');
    }
});

Answer 3

Попробуйте добавить атрибут данных, такой как «активный», через jquery, когда вы щелкнете по одному из них, а затем скроете все те, у кого есть этот атрибут.

Answer 4

Скрыть первое:

$('.custom-select').first().hide();

Скрыть второе:

$('.custom-select').last().hide();

А затем поместите эти строки кода, где это необходимо.

Answer 5

Первая мысль была бы, если бы вы могли обернуть промежуток или div вокруг одного или обоих и использовать это, чтобы обойти ограничение «той же разметки».Кроме этого, я бы предложил использовать порядок на странице - используйте .next () и .prev () для перехода между ними, и что-то вроде

$("div.custom-select").get(0)

или

$("div.custom-select").get(1)

чтобы выбрать их извне.

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

edit2: аналогично, если у вас один из них спрятан правильно - хорошо, тот будет спрятан, и ответьте на «: скрытый»селектор.Используйте это, чтобы различать их (и сохранить различие как переменную jquery), прежде чем показывать или скрывать что-либо еще

Answer 6

$('.custom-select').eq(0).hide() скроет первый.

Используйте .show() вместо .hide(), чтобы показать (очевидно), и измените индекс на (1), чтобы получить второй.