jquery if hasclass doesn't work

Question

I want to show nested ul if it's parent li has active class. Active class to li has been applied dynamically through jquery. This is my side navigation

        <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>

I have set active class to each li, if this li is clicked.

$('.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'); 
        }
    });

Now I want to show nested ul of any li if it has nested ul. So I applied hasClass. It works in case of alert, but to add css to nested ul doesn't work. I have test using chld, next, closest, but doesn't work. Any idea?

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

Can you provide code?

Nirali
– Nirali

2018-04-19 04:20:37 +00:00
Commented Apr 19, 2018 at 4:20 — Nirali
– Nirali, Commented Apr 19, 2018 at 4:20
@Nirali, I've updated code.

Dipak
– Dipak

2018-04-19 04:29:37 +00:00
Commented Apr 19, 2018 at 4:29 — Dipak
– Dipak, Commented Apr 19, 2018 at 4:29

Shridhar Sharma · Accepted Answer · 2018-04-19 04:27:11Z

2

You have to use .each(), because you are using this without a context, each itrates through all the elements and provides a context for every element.

Checkout the following snippet.

$(".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>

answered Apr 19, 2018 at 4:27

Shridhar Sharma

2,3871 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shridhar Sharma Over a year ago

Welcome dude @DipakOjha

Bee · Accepted Answer · 2018-04-19 04:27:07Z

2

You are doing the wrong selection. Just use

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

This means, if the 'li' has active class, the next first 'ul' with the class 'nav-second-level' will get the css applied to it.

edited Apr 19, 2018 at 4:27

answered Apr 19, 2018 at 4:23

Bee

1247 bronze badges

Collectives™ on Stack Overflow

jquery if hasclass doesn't work

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related