Блог

эй, ребята, я создал свой собственный вид поля выбора в html с помощью css и jquery.

 <div class="select">
    <ul>
        <li class="destination option small darr loc">One</li>
        <li class="destination option small loc">Two</li>
        <li class="destination option small loc">Three</li>
        <li class="destination option small loc">Four</li>
    </ul>
</div>
  

jQuery:

    //select box
$('.select ul li.option').click(function(e) {
    e.stopPropagation();
    $(this).siblings().slideToggle(100).removeClass('darr');
    $(this).addClass('darr');
});

$(document).click(function(e) {

    $('.select ul li.option').each(function() {

        if ( !$(this).is(":hidden") ) {
            $(this).not('.darr').slideToggle(100);
        }

    });

});
  

Итак, при нажатии на первый элемент поле выбора расширяется как выпадающий список. При нажатии на один из параметров поле выбора снова сворачивается.

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

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

Смотрите мой пример здесь: http://jsfiddle.net/UWSUk Когда вы разворачиваете второе поле выбора, а затем напрямую нажимаете на то, что выше, оно не сворачивается. Оба остаются открытыми.

Есть идеи, как это исправить?

Вы можете исправить это с помощью:

1. Разрешение распространения
2. Присвоение идентификаторов родительским разделам каждого ul
3. Сохранение из div каждого выбранного li
4. Только сворачивающиеся ЛИ, у которых нет сохраненного родительского идентификатора.

Проверка сравнения атрибутов id должна сработать, потому что идентификаторы должны быть уникальными на странице.

Вы можете увидеть, как это работает здесь.

Вот Javascript:

 var currentSelectDiv = null;
$('.select ul li.option').click(function(e) {
    // store the id attribute
    currentSelectDiv = $(this).parents("div.select").attr("id");

    $(this).siblings().slideToggle(100).removeClass('darr');
    $(this).addClass('darr');
    // allow bubbling because we want this event to close other classes
});

$(document).click(function(e) {
    $('.select ul li.option').each(function() {
        // check IDs to make sure we are only closing the other lis, not our own
        if($(this).parents("div.select").attr("id") !=
           currentSelectDiv) {
            if ( !$(this).is(":hidden") ) {
                $(this).not('.darr').slideToggle(100);
            }
        }
    });
    // clear the currently clicked parent
    currentSelectDiv = null;
});
  

И вот HTML:

 <div class="select" id="first" style="z-index:2">
    <ul>
        <li class="destination option small darr loc">One</li>
        <li class="destination option small loc">Two</li>
        <li class="destination option small loc">Three</li>
        <li class="destination option small loc">Four</li>
    </ul>
</div>

<div class="select" id="second">
    <ul>
        <li class="destination option small darr dest">Five</li>
        <li class="destination option small dest">Six</li>
        <li class="destination option small dest">Seven</li>
        <li class="destination option small dest">Eight</li>
    </ul>
</div>
  

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

(не оптимизировано) http://jsfiddle.net/jbEyJ/1