Question

我修改了以下代码并将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 for hover

 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 for click

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)只有一个回调（每个点击事件触发）

toggle(callback1, callback2)有两个，它们是交替触发的

hover(callback1, callback2)还有两个，mouseover事件触发了callback1，mouseout事件触发了callback2

如何将hover更改为click事件？

1 个答案: