按钮中的图标未注册点击事件

Question

我有一个带有文本和向下箭头图标的按钮，我用它来触发下拉菜单。当我单击按钮的文本部分时，会出现下拉菜单，我有一些 jquery 来修改文本并翻转箭头 - 太棒了。但是，当我单击按钮的图标部分时，文本会发生变化并且图标会翻转，但下拉菜单不会出现。

我是否将其转换为锚链接并更改可点击区域，或者是否有更简单的解决方案？

HTML

<button type="button" class="btn btn-info button-drop text-nowrap" data-toggle="collapse" data-target="#ph-detail" aria-expanded="false" aria-controls="ph-detail">See More 
<i class="bi bi-arrow-down"></i>
</button>

<div class="collapse" id="ph-detail">
<p>Expandable content</p>
</div>

JQuery

$('.button-drop').click(function() {
  $(this).toggleClass( "active" );
  if ($(this).hasClass("active")) {
    $(this).html('See Less <i class="bi bi-arrow-up">');
  } else {
    $(this).html('See More <i class="bi bi-arrow-down">');
  }
});

Answer 1

这两个代码都适合我。我想你还没有添加jQuery的cdnjs文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

$('.button-drop').click(function() {
  $(".button-drop").toggleClass( "active" );
  if ($(".button-drop").hasClass("active")) {
      $(".button-drop").html('See Less <i class="bi bi-arrow-up">');
    } else {
      $(".button-drop").html('See More <i class="bi bi-arrow-down">');
    }
});

$('.button-drop').click(function() {
  $(this).toggleClass( "active" );
  if ($(this).hasClass("active")) {
      $(this).html('See Less <i class="bi bi-arrow-up">');
    } else {
      $(this).html('See More <i class="bi bi-arrow-down">');
    }
});

Answer 2

最后我用以下方法解决了这个问题：

<button type="button" class="btn btn-info button-drop text-nowrap" data-toggle="collapse" data-target="#ph-detail" aria-expanded="false" aria-controls="ph-detail"><span>See More </span>
<i class="bi bi-arrow-down"></i>
</button>

$('.button-drop').click(function() {
    $(this).find('i').toggleClass('bi bi-arrow-up');
    $(this).find('span').text(function(a, text) {
        return text === "See More " ? "See Less " : "See More ";
    });
});

Answer 3

所以，我发生了类似的事情，似乎 onClick 函数没有被触发，但它确实被触发了，但是由于我建立了一个事件侦听器函数来折叠我的下拉菜单，因此状态立即发生了变化点击外面。

window.onclick = function (event) {
  if (!event.target.matches(".dropdown button")) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.style.display === "block") {
        openDropdown.style.display = "none";
      }
    }
  }
};

这创建了竞争条件，并且样式在更改为“块”后立即更新为“无”。这有点不同，因为我没有使用 jQuery（只是普通 JS），但我认为概念是相同的，可能是 OP 描述的问题。