按鈕中的圖標未注冊點擊事件

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 ";
    });
});