javascript - div中的两个span元素均不可点击

我在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');

        }
});

问题：只有带有图标的跨度是可单击的。我希望两个范围都是可单击的，而不仅仅是图标范围。
我该如何实现？请帮忙

最佳答案

做到这一点的一种优雅方法是使用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>

关于javascript - div中的两个span元素均不可点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51319722/