Question

I’m trying to show a dropdown box using the jquery. It’s working well. I also implemented the option to hide the dropdown list when we click in any other position of the page after opening the list. I have used the following jQuery for that.

$('div.selectBox').each(function(){
    $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
    $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
    $(this).children('span.selected,span.selectArrow').click(function(){
        if($(this).parent().children('div.selectOptions').css('display') == 'none'){
            $(this).parent().children('div.selectOptions').css('display','block');
        }
        else
        {
            $(this).parent().children('div.selectOptions').css('display','none');
        }
    });
    $(document).unbind('click');
    $(document).click(function(event){
        if($(event.target).closest('div.selectBox').length == 0) {
             $('.selectOptions').hide();                
        }
    });
    $(this).find('span.selectOption').click(function(){
        $(this).parent().css('display','none');
        $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
        $(this).parent().siblings('span.selected').html($(this).html());
    });
});

It closes or hides perfectly when we click in any other part of the site. But the problem is some other <div> tags are becoming hidden or display:none; after performing this operation.

Please advise me a solution for this. You can see it affects completely in the above url. Please let me know if you need any other information.

Answer 1

$(this).toggleClass('open').next().toggle();

This line in the various places its scattered through your code appears to be causing the issue. I’m not sure what it was originally intended to accomplish. It may need amended or just out right removing depending on what the intention for it was.

Edit

After playing with your jsFiddle I can see its intention was to toggle the nested child element and needs changing to $(this).toggleClass('open'); to work properlly