如何將懸停更改為Click事件？

Question

我更改了以下代碼，並用on('click',...)替換了hover() on('click',...)並放下stop(true,true) 。 我也嘗試過mouseenter() 。 使用hover()沒問題。 如何將其添加到單擊事件的懸停事件中，我想在mouseout()事件中使用懸停。 更改點擊事件后，唯一的插入符號正在工作。

菜單：

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li *ngFor="let item of _profile.menus;" class="dropdown"><a
            href="#" class="dropdown-toggle" data-toggle="dropdown"     role="button"
            aria-haspopup="true" aria-expanded="true">{{item.caption}}<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a (click)="clk()" class="ex1">{{subitem.caption}}</a></li>
            </ul>
        </li>
    </ul>
</div>

懸停的jQuery

 jQuery(function(){
    jQuery(".dropdown").hover(            
            function() {
                jQuery('.dropdown-menu',this).stop( true, true ).fadeIn("fast");
                jQuery(this).toggleClass('open');
                jQuery('b',this).toggleClass("caret caret-up");                
            },
            function() {
                jQuery('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
                jQuery(this).toggleClass('open');
                jQuery('b', this).toggleClass("caret caret-up");                
            });
    });

點擊更改了jQuery

jQuery(function(){
        jQuery(".dropdown").on('click',            
                function() {
                    jQuery('.dropdown-menu',this).fadeIn("fast");
                    jQuery(this).toggleClass('open');
                    jQuery('b',this).toggleClass("caret caret-up");                
                },
                function() {
                    jQuery('.dropdown-menu', this).fadeOut("fast");
                    jQuery(this).toggleClass('open');
                    jQuery('b', this).toggleClass("caret caret-up");                
                });
        });

CSS

 a.ex1:hover, a.ex1:active {font-size: 110%;}

.dropdown-menu {
  background-color: #3b5998;

  opacity:.3;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards; 
  -webkit-transform: scale(1, 0);
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
 }

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: black;
  background-color: #efefef;  
 }

.dropdown-menu > li > a {
  color: white;
  text-decoration: none;
 }

.nav > li > a:hover,
.nav > li > a:focus{
    color: white;
    text-decoration: none;
    background-color: #5872a7; 
 }

.nav > li >a {
    color: white;
 }

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #286090;
 }

.navbar-brand, .navbar-nav>li>a {
    text-shadow: 0 0px 0;
    color: #f7fcff;
    text-decoration: none;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 20px;
    line-height: 20px;
}

.icon-bar
{
    display:block;
    width:22px;
    height:2px;
    border-radius:1px;
    border:1px solid white;
}

.open > .dropdown-menu {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  
  opacity:1;
}

.caret-up {
    width: 0; 
    height: 0; 
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid;

    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}

Answer 1

林不知道，如果這是您的意圖，但您可以使用切換而不是懸停

http://api.jquery.com/toggle/

jQuery(function(){
        jQuery(".dropdown").toggle(
                function() {
                    jQuery('.dropdown-menu',this).fadeIn("fast");
                    jQuery(this).toggleClass('open');
                    jQuery('b',this).toggleClass("caret caret-up");                
                },
                function() {
                    jQuery('.dropdown-menu', this).fadeOut("fast");
                    jQuery(this).toggleClass('open');
                    jQuery('b', this).toggleClass("caret caret-up");                
                });
        });

您可以看到on('click', callback)只有一個回調（針對每個click事件觸發）

toggle(callback1, callback2)有兩個，交替觸發

hover(callback1, callback2)也有兩個，在mouseover事件上觸發callback1，在mouseout事件上觸發callback2