如何突出顯示當前點擊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'); 
});