Question

I need to make crossbrowser styled tags in jQuery. So instead of making clean html SELECT element tags, i use nested elements. There will be a lot of selectboxes available on page, so they should work correctly with each other.

Edit: Fade effects “fadeIn() / fadeOut()” should be used instead of “hide() / show()”

Introducing an example:

Instead of having classic clean html element of dropdown list:

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

I have nested elements so i can style them properly:

<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>

Here is the code: http://jsfiddle.net/aspirinemaga/XR4Y3/

It should work in that way:

• When i click on any element, it should close all selectboxes
• When i click on “.gui-selectbox-button”, it should show “.gui-selectbox-dialog” of its parent “.gui-selectbox”
• If user clicks outside of “.gui-selectbox-button” and “.gui-selectbox-dialog”, it should close every opened selectboxes

UPDATED:

How can i tell to function to not close parent div if current target is its child ?

Here is an example: http://jsfiddle.net/aspirinemaga/ejyRR/5/. It’ a third element.

Answer 1

You can consolidate your code quite a bit. This will do what you want.

Example 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 Demo: http://jsfiddle.net/tJ7Qb/

Edit: Updated my code and demo link since I had portions using old .click() event method and some using the new .on() method. Also added an alert on option click.