javascript - 使用 jQuery 切换名为 "a:active"的类时出现问题

Question

就目前情况而言，单击“链接”两次会将您重定向到一个页面，但每当您单击该页面及其周围以使菜单下拉或上升时，CSS 代码就会生效

a:active span {
    color:#bdbcae;
}

已生效。我想做的是使链接仅在您第二次单击时改变颜色，从而导致您被重定向到该页面。如果您仅单击一次，以便仅下拉菜单，我希望链接保持其默认颜色。

这是我下面函数中的代码，我正在寻找它来完成此任务

 if ($(this).data('clicks')==2){
       $(this).data('clicks', 0); 
       window.open("accomplishments.html");
 }

我正在考虑在这个 if 语句中添加类似于 $(this).addClass("active") 的内容，但这不起作用 - 然后让它执行 $(this).removeClass("active") 只要不是这种情况，但这些都不起作用。请参阅下面的完整代码。

<强> Here's my Bootply .

HTML:

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

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

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

                    <ul class="nav navbar-nav navbar-right">                            
                        <li class="dropdown">   
                            <a href="page.html" class="dropdown-toggle" data-toggle="dropdown"><span>Link</span><b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->

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

CSS:

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

jQuery:

$(document).on("click", "span", function() {
         if(typeof $(this).data('clicks') == 'undefined') {
             $(this).data('clicks', 1);
             }else {
             $(this).data('clicks', $(this).data('clicks')+1);
         }
         if ($(this).data('clicks')==2){
                 $(this).data('clicks', 0); 
                 window.open("page.html");
         }
     });

$(document).click(function(event) {

    if(!$(event.target).closest("span").length) {        
            $("span").data('clicks', 0);  
    }        
});

Answer 1

我认为使用“click”和“dblclick”事件会对您有所帮助，如果您要重定向用户，为什么要设置特定颜色？

Jquery双击事件:http://api.jquery.com/dblclick/