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

Question

我这里有一个 Accordion 式的导航。因此，每次单击 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 元素。