javascript - 在 Accordion 中打开外部菜单项时，无法将新的颜色类添加到第一个子菜单项

Question

这是我的 fiddle :

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

我使用 Accordion 来实现带有子菜单的菜单。我想要做的是，每次单击外部菜单项时，我希望第一个项目(第一个子项)突出显示为红色，即使它没有被单击。当我单击任何其他菜单项时，它应该仅突出显示单击的菜单项。然后，当我再次打开外部菜单项时，默认情况下第一个菜单项应再次突出显示。我正在尝试根据特定的 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 标记。

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

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

这需要更改outerMenuItem 处理程序以删除先前单击的innerMenuItem 上的样式。我只是将其添加到该处理程序的顶部:

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

这是对您的 fiddle 的更新，这两行更改:

https://jsfiddle.net/5rhnyyfe/