jquery 仅在第二次单击时触发

Question

我有一个下拉框，当我单击它时，箭头会旋转。然而，箭头只在第二次单击时旋转。我做错了什么？

<div class="dropdown">
 <a onclick="UserdropDownDetails()"><div class="triangle1"></div></a>
  <div id="myDropdown" class="dropdown-content ">
    <ul>
     // drop down elements
    </ul>
  </div>
</div>

CSS

.triangle1 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;
    transition: .5s ease;
}

.triangle-up {
    transform: rotate(180deg);
}

代码:

function flipTriangle() {
                $('.triangle1').on('click', function () {
                    $(this).toggleClass("triangle-up");  //this flips my image but its only working if i click it twice.
                });
            }

function UserdropDownDetails() {
            flipTriangle(); i need this to fire the first time its clicked
            document.getElementById("myDropdown").classList.toggle("show"); //this shows my drop down,which works fine.

        }

我做错了什么？

Answer 1

您正在函数 flipTriangle 中绑定(bind)事件处理程序，因此该事件会在第一次单击时附加，从而在第二次单击时起作用。

将代码移到函数之外。

$(function () {
    $('.triangle1').on('click', function () {
        $(this).toggleClass("triangle-up"); //this flips my image but its only working if i click it twice.
    });
});