Question

即使在我的鼠标悬停功能中，当“下拉”悬停在下拉列表时，它明确表示要将课程active添加到.caret （使其变为灰色）菜单隐藏，当你点击“下拉”两次（一次显示菜单;一次隐藏）并仍然将光标放在“下拉”时，插入符号无法改变颜色（变为灰色），这是奇怪的。

纠正这种情况的唯一方法是离开<span>元素，然后重新输入它，此时它会变为灰色。但是，我希望它在每种情况下都变为灰色，只要跨度元素悬停并且下拉列表被隐藏。

然而，问题似乎是active类被删除，只要点击两次“Dropdown”，但我不知道在哪里。

任何人都知道如何解决这个问题？

Bootply

HTML：

   <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">


                        <li class="dropdown">   
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Dropdown</span><b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#subtab1">1</a></li>
                                <li><a href="#subtab2">2</a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->


                    </ul><!-- END: "nav navbar-nav navbar-right" -->
                </div><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

CSS：

span {
    color:#ffffff;  
}
span.active{
    color:#bdbcae;
}
.caret{
    color:#ffffff;
}
 .caret.active{
     color:#bdbcae;
}

JavaScript的：

/* START: ACCOMPLISHMENTS TELEPORT */
var counter = 0;

const EMPTY_COUNTER = 0, FULL_COUNTER = 2;

var shouldOpen = function () {
return counter === FULL_COUNTER;
};

var resetCounter = function () {
counter = EMPTY_COUNTER;
};

var incrementCounter = function () {
counter++;
};


$(document).on("click", "span", function (e) {

e.preventDefault();
if (counter==1 && !$('.dropdown-menu').is(":visible")) {
    resetCounter();
}
incrementCounter();
if (shouldOpen() || counter==1 && $('.dropdown-menu').is(":visible")) {     
    $("span ").removeClass("active"); 
    resetCounter();
} else {
    $( ".caret" ).removeClass( "active" );  
}
});
/* END: ACCOMPLISHMENTS TELEPORT */

/* START: CLICK ON SPAN/CARET  */
$( "a.dropdown-toggle" ).mousedown(function() {
if ($(event.target).closest("span").length) {
    if ($('.dropdown-menu').is(":visible") && !$( ".dropdown" ).hasClass( "active" )) {
        $( "span" ).addClass( "active" );
    }   
    if (!$('.dropdown-menu').is(":visible")) {
        $( ".caret" ).addClass( "active" ); 
    }       
} else {
    $( ".caret" ).addClass( "active" );
}
});
/* END: SPAN/CARET ON CLICK */

/* START: CARET ON HOVER */
$(document).mouseover(function() {
if ($(event.target).closest("a.dropdown-toggle").length) {
    if ($(event.target).closest("span").length) {   
        if (!$('.dropdown-menu').is(":visible")) {
            $( ".caret" ).addClass( "active" );
        } else {    
            $( ".caret" ).removeClass( "active" );
        }
    } else {
        $( ".caret" ).addClass( "active" );
        $( "span" ).removeClass( "active" );
    }       
} else {    
        $( "span" ).removeClass( "active" );
        $( ".caret" ).removeClass( "active" );              
}
});
/* END: CARET ON HOVER */

＆＃34;有源＆＃34;以某种方式被从＃34; .caret＆＃34;

0 个答案: