Question

我的风格Selectfield有点问题。我用这个无序列表元素（UL / LI）和H3。

问题是关闭＆＃34; Selectfield＆＃34;点击页面上的任意位置。当我将点击事件绑定到＆＃34;文档＆＃34;时，请不要使用当前的jQuery代码打开SelectField。

我使用CSS隐藏了UL元素（display：none）。要打开选择字段不是问题。但只有没有$（文件）.bind（＆＃39;点击＆＃39;）[...]代码。

我希望有人能为我解决问题。感谢。

这是我的HTML代码：

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

这里是jQuery代码：

$(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);
});

Answer 1

您需要在.stopPropagation函数中使用$('.select_container').on('click')来防止触发$(document).on('click')

您还需要toggleClass使用$(document).on('click')

$('.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

Answer 2

在jquery和javascript中，事件会冒泡，因此您必须在容器上单击时使用e.stopPropagation（）。
检查theese页面linki1或link2，您的问题的可能解决方案可能是

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

使用stopPropagation可以防止事件冒泡并在单击列表时被文档捕获在某些情况下，你也可以使用stopImmediatePropagation来理解stopPropagation和stopImmediatePropagation之间的区别，检查这篇文章Post
类似代码和Batu Zet代码的唯一缺点是，如果您希望单击列表中的项目而不会消失，则必须在ul标记上添加另一个stopPropagation 这是最后的Fiddle

样式选择带有jquery和HTML Listelements的字段

2 个答案: