javascript - div 内的两个 span 元素都不可点击

Question

我在一个 div 中有两个 span 元素 -

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>

我的 jquery 代码是 -

$('.input-categories').on('click',function(){
        if ($(this).parent().hasClass("open")){
             $(this).parent().removeClass("open");    

        }else {
            $('.input-categories').parent().removeClass('open');
            $(this).parent().addClass('open');

        }
});

问题:只有带有图标的范围是可点击的。我希望两个跨度都可以点击，而不仅仅是图标跨度。我怎样才能做到这一点？请帮忙

Answer 1

一个优雅的方法是使用 jquery 的 toggleClass 方法。

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>
<script>
$('.input-categories span').on('click',function(){
        $(this).parent().toggleClass("open");    
});
</script>