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

how to highlight currently clicked h3 and li elements jquery

本文关键字：h3 li 元素 jquery 单击 何突出 显示      更新时间：2023-09-26

我这里有一个手风琴样式的导航。因此，每次单击H3时，列表项就会下拉。

1。如果点击了H3，我想把它涂成绿色，这样用户就知道当前点击了什么。
2.我还想给任何被点击的物品/狗上色( elements)。所以当前被点击的标题和副标题都应该被高亮显示。

 <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尝试的，它不起作用。另外，我不知道该怎么做。

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



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

你可以这样做:

$('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元素。

您的活动类没有针对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');
});
相关文章：