Скрыть при нажатии за пределами нескольких элементов - PullRequest
Новая
       21

Скрыть при нажатии за пределами нескольких элементов

1 голос
/ 06 января 2012

Мне нужно сделать кроссбраузер в стиле тегов в jQuery. Поэтому вместо создания чистых HTML-тегов элементов SELECT, я использую вложенные элементы. На странице будет доступно множество полей выбора, поэтому они должны корректно работать друг с другом.

Редактировать: Эффекты затухания «fadeIn () / fadeOut ()» следует использовать вместо «hide () / show ()»

Представляем пример:

Вместо наличия классического чистого HTML-элемента из выпадающего списка: 

<select>
  <option>Option 1</option>
  <option>Option 1</option>
  <option>Option 1</option>
</select>

У меня есть вложенные элементы, поэтому я могу правильно их стилизовать: 

<div class="gui-selectbox">
  <a class="gui-selectbox-button">
    <span class="gui-btn-l"></span>
    <span class="gui-btn-c">Option 1</span>
    <span class="gui-btn-r"></span>
  </a>
  <div class="gui-selectbox-dialog">
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    <ul>
  </div>
</div>

Вот код : http://jsfiddle.net/aspirinemaga/XR4Y3/

Должно работать так:

  • Когда я нажимаю на любой элемент, он должен закрыть все поля выбора
  • Когда я нажимаю ".gui-selectbox-button", он должен показывать ".gui-selectbox-dialog" своего родителя ".gui-selectbox"
  • Если пользователь щелкает за пределами «.gui-selectbox-button» и «.gui-selectbox-dialog», он должен закрывать все открытые поля выбора

ОБНОВЛЕНО:

Как я могу сказать, чтобы функция не закрывала родительский div, если текущая цель - его потомок?

Вот пример: http://jsfiddle.net/aspirinemaga/ejyRR/5/. Это третий элемент.

Ответы [ 3 ]

1 голос
/ 06 января 2012

Вы можете объединить свой код совсем немного.Это будет делать то, что вы хотите.

Пример 1 

$('html').on('click', function() {
    $('.gui-selectbox-dialog:visible').hide();
});

$('.gui-selectbox').on('click', function(event) {
    $('.gui-selectbox-dialog:visible').hide();
    $(this).find('.gui-selectbox-dialog').show();

    event.stopPropagation();
});

$('.gui-selectbox-dialog ul').on('click', 'li', function(event) {
    alert('selected = ' + $(this).text());

    event.stopPropagation();
});

Демонстрация скрипки: http://jsfiddle.net/tJ7Qb/

Редактировать :Обновил мой код и демонстрационную ссылку, так как у меня были части, использующие старый метод .click(), а некоторые - новый .on().Также добавлено предупреждение при нажатии кнопки.

0 голосов
/ 06 января 2012

На самом деле, Крис Койер @ CSS-Tricks.com уже сделал то, что вы пытаетесь сделать .

Он также предоставляет весь код и пояснения. Удачи:)

0 голосов
/ 06 января 2012

Что вы можете сделать, это назначить функцию click() вашему телу.И в рамках этой функции проверьте, какой элемент был нажат точно.Если это не ваш выбор, закройте открытые.Иначе, откройте или закройте тот, который был нажат.

Позвольте мне уточнить это в некотором коде: 

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

    if (gui_currentSelectboxID != null) {
        $this = $(event.target);
        $parent = $this.parent().parent();

        //Check if the clicked item was NOT the gui-selectbox option
        if ($parent.attr('class') != 'gui-selectbox') {
            $('#' + gui_currentSelectboxID).children('.gui-selectbox-dialog').fadeOut(100);
            $('#' + gui_currentSelectboxID).children('.gui-selectbox-button').removeClass('active');
        }
    }

});

Это должно помочь:

http://jsfiddle.net/XR4Y3/5/

Вы все еще можете оптимизировать это, проверяя, действительно ли существует .parent().parent(), потому что, например, у document не будет двух родителей.Другая оптимизация состояла бы в том, чтобы использовать функции, которые вы фактически объявили, чтобы скрыть поля выбора и т.д ..

...