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

Question

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

Edit: Fade эффекты "FadeIn()/Затухание()" должны быть использованы вместо "шкурой()/шоу()"

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

Вместо того, чтобы классических чистый 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/

Он должен работать таким образом:

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

ОБНОВЛЕНЫ:

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

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

Answer 1

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

Пример 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(); 
}); 

Fiddle Демо: http://jsfiddle.net/tJ7Qb/

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

Answer 2

Что вы можете сделать, это назначить функцию 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 не будет двух родителей. Другие оптимизации будут состоять в том, чтобы использовать функции, которые вы фактически объявили, чтобы скрыть выбранные ячейки и т. Д.

Answer 3

Actualy, Chris Coyer @ CSS-Tricks.com already did what you're trying to do.

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