使用javascript添加活動狀態到菜單鏈接

我正在嘗試將活動狀態添加到我的fadetoggle菜單。使用javascript添加活動狀態到菜單鏈接

當用戶點擊其中一個菜單選項時，菜單淡入，並出現一個箭頭出現在活動菜單項下。當用戶點擊它時，菜單會淡入淡出，我無法正確判斷的是活動狀態。我在網上看過幾個例子。我想簡單易懂的代碼，我想出了下面的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; 
}

來源

2014-02-20 fnk

活動狀態只應在菜單淡入時出現，並在菜單淡出時消失。 – fnk

我在看你的網站，我不明白你在做什麼。你介意發佈一個你希望菜單在打開時的樣子嗎？ – Matt

當你點擊一個菜單項（如恢復，法醫和訓練）時，切換菜單會淡入，並且在切換菜單的頂部應該是一個箭頭，指向哪個菜單項被點擊，無論是恢復還是取證。很抱歉，我沒有截圖。 – fnk

我結束了使用我通過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

希望它可以幫助其他人尋找實現相同的事情。

來源

2014-02-21 10:20:20 fnk

使用javascript添加活動狀態到菜單鏈接

回答

相關問題