如何突出显示当前点击h3和li元素jquery

Question

我在这里有一个手风琴风格的导航。所以每次点击H3时，列表项都会下降。

1.我想点击H3绿色，如果点击，所以用户知道什么是目前点击。
2.我也想给任何物品/狗点击颜色（< a>元素）。 因此，当前点击的标题和副标题都应该突出显示。

<div id="accordian"> 
     <ul class="sidebar-nav" id=menu> 
      <li class="active"> 
       <h3>ITEMS</h3> 
       <ul> 
        <li><a href='#item1"> item1</a></li> 
        <li><a href='#item2"> item2</a></li> 
        <li><a href='#item3"> item3</a></li> 

       </ul> 
      </li> 

      <li> 
       <h3>dogs</h3> 
        <ul> 
         <li><a href='#dog1"> dog1</a></li> 
         <li><a href='#dog2"> dog2</a></li> 
         <li><a href='#dog3"> dog3</a></li> 

       </ul> 
      </li> 

     </ul> 
    </div> 

这是我到目前为止尝试1，它不起作用。另外，不知道该怎么办2

.sidebar-nav li.active{ 
color:green; 

} 

$('ul.sidebar-nav li h3').on('click', function(){ 
      $('ul.sidebar-nav li').removeClass('active'); 
      $(this).addClass('active'); 

     }); 

Answer 1

你可以做这样的事情：

$('ul.sidebar-nav li h3').on('click', function(){ 
 
    $("ul.sidebar-nav li ul li, ul.sidebar-nav li h3").removeClass("active"); 
 
    $(this).addClass("active"); 
 
}); 
 

 
$('ul.sidebar-nav li ul li').on('click', function(){ 
 
    if($(this).parents("li").find("h3").hasClass("active")){ 
 
     $(this).addClass("active"); 
 
    } 
 
});

.active{ 
 
    color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="accordian"> 
 
     <ul class="sidebar-nav" id=menu> 
 
      <li> 
 
       <h3>ITEMS</h3> 
 
       <ul> 
 
        <li><a href="#item1"> item1</a></li> 
 
        <li><a href="#item2"> item2</a></li> 
 
        <li><a href="#item3"> item3</a></li> 
 

 
       </ul> 
 
      </li> 
 

 
      <li> 
 
       <h3>dogs</h3> 
 
        <ul> 
 
         <li><a href="#dog1"> dog1</a></li> 
 
         <li><a href="#dog2"> dog2</a></li> 
 
         <li><a href="#dog3"> dog3</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div>

的想法是使用单击元素来查找需要突出显示的h3和li。此外，在CSS中，使选择器更通用，因此它将适用于h3和li元素。

Answer 2

您没有定位与您主动类的H3标签。在你的代码中，$（this）指的是li。您将需要定位具有收听者的单击li的父H3。

编辑

在代码示例中看到我的意见，我增加了线条。我将所有h3标签作为目标，并删除活动类以清除所有内容，然后我只定位点击li的父级h3标签。

还要更新你的风格有一个不太具体类与类活动的任何元素：

.active { 
     color:green; 
    } 

$('ul.sidebar-nav li').on('click', function(){ 
     $('ul.sidebar-nav li').removeClass('active'); 

     // removes all active classes on h3 tags 
     $('#accordian').find('h3').removeClass('active'); 

     $(this).addClass('active'); 

     // add active to parent h3 as well 
     $(this).parents('h3').addClass('active'); 
}); 

// If you want them to to highlight independently you need 2 listeners 

$('#accordion').find('.sidebar-nav h3').on('click', function() { 
    // removes all active classes on h3 tags 
    $('#accordian').find('h3').removeClass('active'); 
    // add active to parent h3 as well 
    $(this).addClass('active'); 
}); 

$('#accordion').find('.sidebar-nav a').on('click', function() { 
    $('#accordion').find('.sidebar-nav a').removeClass('active'); 
    $(this).addClass('active'); 
});