切换名为“a：active”的类时出现问题使用jQuery [英] Problems when toggling a class called "a:active" using jQuery

问题描述

现在，单击链接两次会将您重定向到一个页面，但每当您单击并左右该菜单以使菜单下降或上升时，CSS代码

  a：有效范围{
颜色：#bdbcae; 
} 
  

已生效。我试图做的是让链接只在第二次点击时才改变颜色，导致你被重定向到页面。如果你只点击一次，只有菜单下降，我希望链接保持其默认颜色。

这是我的函数中的代码，我是（$（this）.data（'clicks'）== 2）{$ b $）$ / $>

  if b $（this）.data（'clicks'，0）; 
 window.open（achievementments.html）; 
} 
  

我正在考虑在 $（this）.addClass（active）在这个if语句中，但不起作用 - 然后使它做 $（this）.removeClass（active ），只要不是这种情况，但这些都不起作用。请参阅下面的完整代码。

这是我的Bootply 。

HTML：

  < div class =navbar navbar-inverse navbar-fixed-top> 
< div class =container> 
 
< button class =navbar-toggledata-toggle =collapsedata-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> 
 < 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：有效跨度{
颜色：#bdbcae; 
} 
 a：active * .caret {
 color：#bdbcae; 
 
  

jQuery：

<$ $（this）.data（'clicks'）=='$（$） （'clicks'，1）;
} else {
$（this）.data（'clicks'，$（this）.data （'clicks'）+ 1）;
}
if（$（this）.data（'clicks'）== 2）{
$（this）.data（'clicks' ，0）;
window.open（page.html）;
}
}）;
$ b $（document）.click（function（event）{

if（！$（event.target）.closest（span）。length）{
$（span）。data（'clicks'，0）;
}
}）;

解决方案

我认为使用click和dblclick 事件会帮助你，为什么你要设置一个特定的颜色，如果你要重定向用户？

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

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);  
    }        
});

解决方案

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/

这篇关于切换名为“a：active”的类时出现问题使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！