jqueryのみ2回目のクリックで発砲する

Question

私はドロップダウンボックスを持っています。矢印をクリックするとrotate.howの矢印が2回目のclick.whatで回転します。

<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

限り私はこのことを理解し、UserdropDownDetails（）関数は、$（この）.toggleClass（ "三角アップ"）を発生しません。

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

それともあなただけの火災の後でそれを登録することができます：それはonclickの中に置かれているようevent.The機能が

function flipTriangle(){ 

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

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

Answer 2

イベントハンドラは関数flipTriangleにバインドされているので、イベントは最初のクリックでアタッチされるため、2回目のクリックで動作します。

コードを関数外に移動します。

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

Answer 3

のようなものであるべきことはあなたのような準備が文書にイベントを登録する必要がありますようです拳の時間が、それは理にかなっているとあれば、私はよく分からない：あなたは初回のみで起動するように条件を入れていない場合

は

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

それは拳時間後に二回クリックします。