Problems when toggling a class called “a:active” using jQuery

Question

As it stands, clicking on "Link" twice redirects you to a page, but whenever you click on and around it such that the menu drops down or goes up, the CSS code

a:active span {
    color:#bdbcae;
}

is put into effect. What I am trying to do is make it so that the link only changes color when you click it the second time, resulting in you being redirected to the page. If you click it only once so that only the menu drops down, I want the link to remain its default color.

This is the code in my function below that I was looking at to accomplish this

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

I was thinking of adding something along the lines of $(this).addClass("active") within this if statement but that doesn't work - and then making it do $(this).removeClass("active") whenever this isn't the case, but none of this works. See my full code below.

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

I think using a "click" and a "dblclick" event will help you, why do you want to set a particular color if you're going to redirect user ?

Jquery Double click event : http://api.jquery.com/dblclick/