Question

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

1.如果点击了H3绿色，我想给它上色，这样用户就可以知道当前点击了什么 2.我也想要为点击的任何项目/狗（＆lt; a＆gt;元素）着色。因此，当前单击的标题和子标题都应突出显示。

 <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

您没有使用活动类定位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');
});

Answer 2

您可以这样做：

$('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和li元素jquery

2 个答案: