使用javascript向菜单链接添加活动状态
我正在尝试向fadetoggle菜单添加活动状态 当用户单击其中一个菜单选项时,菜单将淡入,并随之在活动菜单项下显示一个箭头。当用户点击菜单时,它会淡入淡出,但我无法确定的是激活状态。我在网上看到了几个例子。我想要简单易懂的代码,我已经提出了以下javascript代码:使用javascript向菜单链接添加活动状态,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试向fadetoggle菜单添加活动状态 当用户单击其中一个菜单选项时,菜单将淡入,并随之在活动菜单项下显示一个箭头。当用户点击菜单时,它会淡入淡出,但我无法确定的是激活状态。我在网上看到了几个例子。我想要简单易懂的代码,我已经提出了以下javascript代码: $(function() { $('.menu-item-recovery a').live('click', function(event) { $('.recovery-bg').show();
$(function() {
$('.menu-item-recovery a').live('click', function(event) {
$('.recovery-bg').show();
$('.recovery-bg').addClass('active');
return false;
});
});
当用户单击以下任何链接时:
<!--Logo & Second Nav-->
<div class="container hidden-phone">
<div class="row">
<div class="span9 second-nav">
<div class="menu-wrapper">
<div class="menu-item-recovery recovery trigger" data-target=".recovery-bg">
<a href="#">Recovery</a>
</div>
<div class="menu-item-forensic trigger" data-target=".forensic-bg">
<a href="#">Forensics</a>
</div>
<div class="menu-item-erasure trigger" data-target=".erasure-bg">
<a href="#">Erasure</a>
</div>
<div class="menu-item-training trigger" data-target=".training-bg">
<a href="#">Training</a>
</div>
<div class="menu-item-products trigger" data-target=".product-bg">
<a href="#">Products</a>
</div>
</div>
</div>
</div>
</div>
<!--/Logo & Second Nav-->
我最终使用了通过stackoverflow论坛找到的cssarrowplease代码。我给它添加了一个链接,这是一个很棒的工具,我对它进行了一些定制,因为该网站响应迅速,我更改了css,这样我就可以为每个下拉箭头添加不同的活动箭头。下面是我为实现这一点而编写的代码
/*------------------------------------
/ Recovery Navigation Arrow
/-----------------------------------*/
.arrow_box_recovery {
position: relative;
background: #05f397;
/*border: 4px solid $recovery;*/
}
.arrow_box_recovery:after {
content: url("http://dev.disklabs.com/html/assets/img/menu-arrow-recovery.png") no-repeat;
height: 20px;
width: 40px;
position: absolute;
top: -13%;
margin-left: -80px;
bottom: 100%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box_recovery:after {
border-color: rgba(5, 243, 151, 0);
border-bottom-color: #05f397;
}
.arrow_box_recovery:before {
border-color: rgba(5, 243, 151, 0);
border-bottom-color: #05f397;
}
下面是我的小提琴的链接,它给出了我想要实现的一个例子。
希望它能帮助其他人实现同样的目标 只有当菜单淡入时,活动状态才会出现,当菜单淡出时,活动状态才会消失。我正在查看你的网站,不明白你想做什么。您是否介意发布一个屏幕截图,显示您希望菜单打开时的样子?当您单击菜单项(如恢复、取证和培训)时,切换菜单会淡入,并且在切换菜单顶部应该有一个箭头,指向曾经单击过的菜单项,无论是恢复还是取证。很抱歉,我没有屏幕截图。尝试添加屏幕截图但无法,stackoverflow不允许我的个人资料添加屏幕截图。对不起,这是一个基本的小提琴,当点击可见菜单时,它可以切换隐藏菜单的开关。一旦你看到“隐形”菜单,你想做什么?
.active {
width: 40px;
height: 20px;
background: url(../img/menu-arrow-recovery.png) no-repeat;
}
/*------------------------------------
/ Recovery Navigation Arrow
/-----------------------------------*/
.arrow_box_recovery {
position: relative;
background: #05f397;
/*border: 4px solid $recovery;*/
}
.arrow_box_recovery:after {
content: url("http://dev.disklabs.com/html/assets/img/menu-arrow-recovery.png") no-repeat;
height: 20px;
width: 40px;
position: absolute;
top: -13%;
margin-left: -80px;
bottom: 100%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box_recovery:after {
border-color: rgba(5, 243, 151, 0);
border-bottom-color: #05f397;
}
.arrow_box_recovery:before {
border-color: rgba(5, 243, 151, 0);
border-bottom-color: #05f397;
}