在手风琴中打开外部菜单项时，无法向第一个子菜单项添加新颜色 class

Question

这是我的 fiddle:

我已经使用手风琴实现了带有子菜单的菜单。我想要做的是，每次单击外部菜单项时，我希望第一个项目（第一个子项）突出显示为红色，即使它没有被单击。当我点击任何其他菜单项时，它应该只突出显示被点击的那个。然后当我再次打开外部菜单项时，默认情况下第一个应该再次突出显示。我正在尝试根据特定的手风琴打开选项卡添加 class 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 class 添加到 li 标签，但您的 CSS 用于 a.innerMenuItemOnClick，这意味着它将仅应用于带有 class 的 a 标签。

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

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

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

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

这是对您的 fiddle 这两行更改的更新：

https://jsfiddle.net/5rhnyyfe/

在手风琴中打开外部菜单项时，无法向第一个子菜单项添加新颜色 class

Unable to add new color class to first sub - menu item when outer menu item is opened in accordion

html

javascript

jquery

jquery-ui

jquery-ui-accordion