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

Question

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

当我点击它时<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");
    }
});