Question

我正在尝试将一个活动状态添加到我的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;
}

Answer 1

我最终使用了通过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;
}

这是我小提琴的链接，给出了我想要实现的一个例子。 working fiddle

希望它可以帮助其他人寻求实现同样的目标。

使用javascript将菜单链接添加到活动状态

1 个答案: