javascript - Navbar div onclick 函数不适用于内部元素

Question

我有一个 div 类 .dropbtn在我的导航栏中，我希望在单击时运行列表下拉功能，但只有文本 "TOTAL"工作onclick。

<span>和 <i>当我点击它时，它里面什么都不做，我需要所有三个元素都可以点击并显示下拉功能。我正在使用 jQuery，但不是 Bootstrap。提前致谢!已编辑。

jQuery('body').on('click', '.dropbtn', function() {
  jQuery("#myDropdown").toggleClass("show");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reservas_right">
  <div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
    <div class="dropbtn">
      TOTAL
      <br /><span id="totalprice">0,00€</span>
      <i class="material-icons">arrow_drop_down</i>
    </div>
    <div class="dropdown-content_reservas" id="myDropdown">
      <ul id="dropul" class="dropul">
        <li id="drop1"></li>
        <li id="drop2"></li>
        <li id="drop3"></li>
        <li id="drop4"></li>
        <li id="drop5"></li>
        <li id="drop6"></li>
      </ul>

    </div>
  </div>
</div>

CSS:

.show{
    list-style-type:none;
}

Answer 1

jQuery('body').on('click', '.dropbtn', function(e) {
    if(e.target !== this && jQuery(e.target).parent().is(".dropbtn"))
    {
        jQuery("#myDropdown").toggleClass("show");
    } else {
        jQuery("#myDropdown").toggleClass("show");
    }
});