jquery 如果 hasclass 不起作用

Question

如果嵌套的 ul 的父级 li 有事件类，我想显示它。 li 的 Active 类已通过 jquery 动态应用。这是我的侧面导航

        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="dashboard.php"><i class="fa fa-dashboard"></i> Dashboard</a>
                </li>
                <li>
                    <a href="ui-elements.html"><i class="fa fa-desktop"></i> UI Elements</a>
                </li>
                <li>
                    <a href="chart.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
                </li>
                <li>
                    <a href="tab-panel.html"><i class="fa fa-qrcode"></i> Tabs & Panels</a>
                </li>

                <li>
                    <a href="table.html"><i class="fa fa-table"></i> Responsive Tables</a>
                </li>
                <li>
                    <a href="form.php"><i class="fa fa-edit"></i> Forms </a>
                </li>


                <li>
                    <a href="class.php"><i class="fa fa-sitemap"></i> Class<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="class.php">Class</a>
                        </li>
                        <li>
                            <a href="Section.php">Section</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="empty.html"><i class="fa fa-fw fa-file"></i> Empty Page</a>
                </li>
            </ul>

        </div>

如果单击此 li，我已为每个 li 设置了事件类。

$('.sidebar-collapse ul li').each(function(){
    if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1){
            $(this).addClass('active-menu');
            $(this).parents('li').addClass("active-menu").siblings().removeClass('active-menu'); 
        }
    });

现在我想显示任何 li 的嵌套 ul(如果它有嵌套 ul)。所以我应用了hasClass。它在警报情况下有效，但将 css 添加到嵌套 ul 不起作用。我使用 chld、next、closest 进行了测试，但不起作用。有什么想法吗？

if($(".sidebar-collapse ul li").hasClass('active-menu')){
    $(this).find('.nav-second-level').css('display','block');
 }  

Answer 1

您必须使用.each()，因为您在没有上下文的情况下使用this，每个元素都会遍历所有元素并为每个元素提供上下文。

查看以下代码片段。

$(".sidebar-collapse ul li").each(function() {
  if ($(this).hasClass('active-menu')) {
    $(this).parent(".nav-second-level").show();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="sidebar-collapse">
  <a href="class.php">
    <i class="fa fa-sitemap"></i> Class<span class="fa arrow"></span> </a>
  <ul class="nav nav-second-level" style="display:none">
    <li class="active-menu">
      <a href="class.php">Class</a>
    </li>
    <li>
      <a href="Section.php">Section</a>
    </li>
  </ul>
</li>