我正在尝试向我的 fadetoggle 菜单添加一个事件状态。
当用户单击其中一个菜单选项时,菜单会淡入,并且事件菜单项下方会出现一个箭头。当用户点击菜单时,菜单会淡入和淡出,我无法得到正确的是事件状态。我在网上看到了几个例子。我想要简单易懂的代码,我想出了以下 javascript 代码:
$(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-->
下面的菜单淡入,需要给它添加一个激活状态:
<!--Expanding Recovery Menu-->
<div class="recovery-bg arrow_box_recovery toggle hidden-phone">
<div class="container expand">
<div class="row">
<div class="span12">
<div class="menu-item menu-item-1 menu-first-rec">
<a href="http://dev.disklabs.com/html/data-recovery.html">
<p>Data <br/> Recovery</p></a>
</div>
<div class="menu-item menu-item-2">
<a href="">
<p>Raid <br/> Recovery</p></a>
</div>
<div class="menu-item menu-item-3">
<a href="">
<p>Forensic <br/> Data Recovery</p></a>
</div>
<div class="menu-item menu-item-4">
<a href="">
<p>Tape <br/> Recovery</p></a>
</div>
</div>
</div>
</div>
</div>
<!--/Expanding Recovery Menu-->
事件状态的css,不确定我需要把它放在哪里:
.active {
width: 40px;
height: 20px;
background: url(../img/menu-arrow-recovery.png) no-repeat;
}
最佳答案
我最终使用了通过 stackoverflow 论坛找到的 cssarrowplease 代码。我已经添加了一个链接 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;
}
这是我的 fiddle 的链接,给出了我想要实现的目标的示例。 working fiddle
希望它能帮助其他想要实现同样目标的人。
关于javascript - 使用javascript向菜单链接添加事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21905694/