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>

问题：只有带有图标的范围才可单击。我希望这两个跨度都可以点击，而不仅仅是图标跨度。

---

我怎样才能做到这一点？请帮助

将类放在span元素上（如果这些是您希望单击的唯一span），并将单击绑定到这些span，如下所示：

<div class="search-input">
  <div class="input-categories">

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

  </div>
</div>

---

将类放在span元素上（如果这些是您希望单击的唯一span），并将单击绑定到这些span，如下所示：

<div class="search-input">
  <div class="input-categories">

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

  </div>
</div>

---

您的代码运行良好。请在此示例中进行检查：

$（'.input categories'）。在（'click'，function（）上{
警报（“点击”）；
});
。图标{
左边距：30px；
}

任何单位类型
您的代码运行良好。请在此示例中进行检查：


$（'.input categories'）。在（'click'，function（）上{
警报（“点击”）；
});
。图标{
左边距：30px；
}

任何单位类型
一种优雅的方法是使用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>


任何单位类型
$（'.input categories span'）。在（'单击'，函数（）上）{
$（this.parent（）.toggleClass（“打开”）；
});
一种优雅的方法是使用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>


任何单位类型
$（'.input categories span'）。在（'单击'，函数（）上）{
$（this.parent（）.toggleClass（“打开”）；
});

$（'.input categories'）。在（'click'，function（）上{
$（this.parent（）.toggleClass（'open'）；
});
@导入url（“https://use.fontawesome.com/releases/v5.1.0/css/all.css");
@导入url（“https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css");
.输入类别{
光标：指针；
}

任何单位类型

$（'.input categories'）。在（'click'，function（）上{
$（this.parent（）.toggleClass（'open'）；
});
@导入url（“https://use.fontawesome.com/releases/v5.1.0/css/all.css");
@导入url（“https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css");
.输入类别{
光标：指针；
}

任何单位类型
我无法复制该问题。请看这里（不重构您的代码，可以编写得更好）它对我有效（可以单击span）可能重复您的意思是光标不是指针。我无法复制该问题。请看这里（不重构您的代码，这样可以编写得更好），它对我有效（可以单击span）可能重复您的意思是光标不是指针吗。