無法爲新的顏色類添加到第一子 - 菜單項時外菜單項手風琴

我用手風琴來實現與子菜單的菜單。我期望做的是每次點擊一個外部菜單項時，即使沒有點擊，我也希望第一個項目（第一個子項）突出顯示爲紅色。當我點擊任何其他菜單項時，它應該只突出顯示一個點擊。然後，當我再次打開外部菜單項時，默認情況下，第一個應該再次突出顯示。我正在嘗試添加一個基於特定手風琴打開選項卡的innerMenuItemOnClick類。

這裏是我的html：

<div id="accordion"> 
    <h3 class="outerMenuItem">OuterItem1</h3> 
    <ul id="statusId"> 
     <li><a class="innerMenuItem" href="#!">Inner Item 1</a></li> 
     <li><a class="innerMenuItem" href="#!">Inner Item 2</a></li> 
     <li><a class="innerMenuItem" href="#!">Inner Item 3</a></li> 
    </ul> 
    <h3 class="outerMenuItem">OuterItem2</h3> 
    <ul id="networkId"> 
     <li><a class="innerMenuItem" href="#!">Inner Item 1</a></li> 
     <li><a class="innerMenuItem" href="#!">Inner Item 2</a></li> 
    </ul>

這裏是我的jQuery：

$("#accordion").accordion({collapsible:true, active:0, heightStyle: "content"}); 


$(document).on("click",".outerMenuItem",function(){ 
    var currentlyActive=$("#accordion").accordion("option", "active"); 
    console.log("Current tab no. "+currentlyActive); 

    if(currentlyActive===0){ 
     console.log($("#statusId li:first-child").text()); 
     $("#statusId li:first-child").addClass("innerMenuItemOnClick");   
    } 

    else if(currentlyActive===1){ 
     $("#networkId li:first-child").addClass("innerMenuItemOnClick"); 

    } 



    else { 

     $("#protocolParameters").load("/404.html .someError"); 

    } 

}); 

$(document).on("click",".innerMenuItem",function() { 
    $(".innerMenuItem").removeClass("innerMenuItemOnClick"); 
    $(this).addClass("innerMenuItemOnClick"); 


});

這裏是基本的CSS：

#accordion .ui-icon{ 
display:none; 
} 

    #accordion .ui-accordion-header{ 
    height:30px; 
    position: relative; 
    z-index: 3; 
    width:200px; 

    } 

    #accordion .ui-accordion-header:hover{ 
      color:#eb5e13; 
     } 

    #accordion .ui-accordion-header .ui-state-active{ 
     color:#eb5e13; 
     } 

    #accordion .ui-accordion-content { 
     position: relative; 
     z-index: 6; 
     width:180px; 
     color:#eb5e13; 
    } 

    #accordion .ui-accordion-header:active{ 
     color:#eb5e13; 
    } 

    a{ 
     color: #3f3f4e; 
     font-weight: bold; 
     padding-left:15px; 
     } 


     a.innerMenuItem{ 
     color: #363545; 
     } 

    a.innerMenuItemOnClick{ 
     color:#eb5e13 !important; 
     }

來源

2015-10-02 Rajat Bansal

我不做完理解你的問題，既不是你的代碼，但是[this]（http://jsfiddle.net/d3su54rt/3/）你在找什麼？ – Lucio

是的，這是我想要的一部分。然而，我想要的是，如果我點擊其中一個「內部菜單項」說項目2，那麼點擊一個應該突出顯示，第一個應該回到原來的黑色字體顏色。如果你運行我的版本，你會看到你可以點擊菜單項，並在點擊時變成紅色。所以我想要的是你剛剛展示的內容和我之前的內容的組合。另外，如果一旦加載頁面，第一個菜單項被突出顯示就會很好。現在，你的代碼不會這樣做。 –

您添加的個innerMenuItemOnClick類的李標籤，但你的CSS是a.innerMenuItemOnClick，這意味着它將只適用於一個一個標籤與類。

爲了與你對一個標籤爲您innerMenuItem鏈接的點擊處理程序使用這個類一致，你應該添加「a」到你的CSS選擇器，添加類直接一個標籤：

$("#statusId li:first-child a").addClass("innerMenuItemOnClick");

這需要更改outerMenuItem處理程序以刪除先前單擊的innerMenuItem的樣式。我只是將此添加到該處理程序的頂部：

$(".innerMenuItem").removeClass("innerMenuItemOnClick");

這裏是更新了自己的小提琴這兩個線路的變化：

https://jsfiddle.net/5rhnyyfe/

來源

2015-10-02 22:38:36

您的方法適用於第一種情況，即在打開手風琴時應突出顯示第一個子菜單項。但是，如果我點擊兄弟子菜單項目說第2項它不讓我突出顯示它。如果你最初檢查我的版本，它是這樣做的。任何方法來解決這個問題？並請分享您更新的提琴。謝謝 –

非常感謝克里斯。如果弄清楚這一點本來就需要很長時間。你拯救了我的一天 –

無法爲新的顏色類添加到第一子 - 菜單項時外菜單項手風琴

回答

相關問題