当以手风琴方式打开外部菜单项时，无法向第一个子菜单项添加新的颜色类

Question

这是我的小提琴:

http://jsfiddle.net/d3su54rt/2/

我已经使用accordion实现了一个带有子菜单的菜单。我要做的是，每次外部菜单项被点击，我想要的第一个项目(第一个子)突出显示为红色，即使它没有点击。当我点击任何其他菜单项时，它应该只突出显示被点击的那个。然后当我再次打开外部菜单项时，默认情况下第一个应该再次突出显示。我试图添加一个类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;
      }

Answer 1

您正在添加innerMenuItemOnClick类到li标签，但是您的CSS是为a。innerMenuItemOnClick，这意味着它将只应用于该类的a标记。

为了与你在a标签上为innerMenuItem链接的点击处理程序使用该类保持一致，你应该在CSS选择器中添加"a"，直接将该类添加到a标签中:

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

这需要更改outerMenuItem处理程序来删除先前单击的innerMenuItem的样式。我只是把这个添加到处理程序的顶部:

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

这是对您的小提琴的更新，这两行更改:

https://jsfiddle.net/5rhnyyfe/