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中绑定事件处理程序，因此事件在第一次单击时附加，因此它在第二次单击时起作用。

将代码移到函数外部。

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

Answer 2

据我所知，UserdropDownDetails（）函数不会触发$（this）.toggleClass（“triangle-up”）;因为它被放置在onclick事件中。函数应该类似于

function flipTriangle(){

                $(".triangle1").toggleClass("triangle-up");  

}
$('.triangle1').on('click',flipTriangle);
function UserdropDownDetails() {
        flipTriangle();
        document.getElementById("myDropdown").classList.toggle("show"); 
    }

Answer 3

似乎您应该在文档准备就绪上注册事件，如：

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

或者你可以在第一次注册后点火，但我不确定它是否有意义并且：

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

如果你没有在第一时间点燃条件，它会在第一次点击两次。

jquery仅在第二次单击时触发

3 个答案: