Question

hey guys,
I’ve build my own kind of select box in html with css and 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);
        }

    });

});

So when clicking on the first Item the selectbox expands like a dropdown. When clicking one of the options the select box collapses again.

I also want the selectbox to collapse when clicking somewhere else on the page, therefore I’m listening to click events on the $(document). That works just fine.

Only little bug I have is, when having multiple of those selectboxes on the page and I expand onr of them and click on another selectbox the previous one doesn’t collapse.

See my example here: http://jsfiddle.net/UWSUk/
When you expand the second select box and then directly click on the one above it doesn’t collapse. Both stay open.

Any idea how to fix that?

Answer 1

You can fix this by:

1. Allowing propegation
2. Assigning IDs to the parent divs of each ul
3. Storing off the div of each clicked li
4. Only collapsing lis that don’t have the stored parent ID.

The id attribute comparison check should work because IDs must be unique in the page.

You can see it working here.

Here’s the 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;
});

And here is the 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>