Styled Select Fields with jquery and HTML Listelements

Question

i have a little problem with my styled Selectfield. I used for this unordered list elemnts (UL / LI) and a H3.

The problem is to close the "Selectfield" by clicking anywhere on the page. When i bind a click event to the "document", then don't open the SelectField with the current jQuery code.

I have hidden the UL Element by using CSS (display:none). To open the Select Fields is not the problem. But only without the $(document).bind('click') [...] code.

I hope anyone have a resolution for my. Thanks.

And here my HTML Code:

<div class="select_container">
   <h3 class="reset">Select Items</h3>
   <ul class="select_elements">
      <li>Select Item 01</li>
      <li>Select Item 02</li>
      <li>Select Item 03</li>
   </ul>
</div>

And here the jQuery Code:

$(document).ready(function(){

    var selectFields = {
        init: function(){

            $('.select_container').on('click',function(){
                $(this).find('ul.select_elements').toggle();
                $(this).find('ul.select_elements').toggleClass('active');
            });

            $(document).bind('click',function(){
                if( $('.select_elements').is(':visible')){
                    $('.select_elements.active').hide();
                }
                else if( $('.select_elements').is(':hidden')){
                    console.log('visible false ...');
                }

            });

        }
    };

    $(selectFields.init);
});

score 0 · Answer 1 · answered Apr 29 '14 at 09:28

You need to use .stopPropagation in $('.select_container').on('click') function to prevent triggiring $(document).on('click')

You need to use toggleClass in $(document).on('click') too

$('.select_container').on('click',function(e){
  $(this).find('ul.select_elements').toggle();
  $(this).find('ul.select_elements').toggleClass('active');
  e.stopPropagation();
});

$(document).on('click',function(){  
  if( $('.select_elements').is(':visible')){
     $('.active').hide();
     $('.select_elements').toggleClass('active');
  }
  else {
     console.log('visible false ...');
  }
});

FIDDLE

score 0 · Answer 2 · edited May 23 '17 at 11:57

In jquery and javascript an event bubbles up so you have to use e.stopPropagation() on your container click.
check theese pages linki1 or link2 and a possible solution to your problem could be

<script type="text/javascript">
$(document).ready(function(){
    var selectFields = {
        init: function(){
           $(document).bind('click',function(e){
              if( !$('ul').hasClass('active')){
                 $('ul').hide()
                 $(this).find('ul.select_elements').toggleClass('active');     
                 }
            }); 

           $('.select_container').on('click',function(e){
                 e.stopPropagation()
                 if( $('ul').hasClass('active')){
                 $('ul').show()
                 }else{ $('ul').hide()   }
                 $(this).find('ul.select_elements').toggleClass('active');
            });

        }
    };

    $(selectFields.init);
})
</script>

With stopPropagation prevent the event from bubbling and being caught by the document when you click on the list
in some cases you can also use stopImmediatePropagation, for understand differences between stopPropagation and stopImmediatePropagation check this post Post
The only drawback to similar code and to and Batu Zet code, is that If you want the items in the list can be clicked without disappearing, you have to add another stopPropagation on ul tag
Tis is the final Fiddle

Styled Select Fields with jquery and HTML Listelements

2 Answers2