CODEWITHSUNDEEP
jquery
Beginner
Beginner

Reputation: 29543

jquery toggle parent parent li?

I have html with a submenu inside another submenu. What i want is on page load if a sub sub li has the class turnedon for the parent to toggle and its parent to toggle, so the li containing the li with class turned on are all visible..

HTML:

<ul class="NewsSubMenu">
   <li class="NewsSubMenuOn" style="margin-left:-1.7px;">
      <span style="padding-left:35px; color:White;">  News Archive</span>
       <ul class="NewsArchive">
           <li class="off">
           <a href="#" class="year">2012</a>                
                <ul class="NewsMonths">
                        <li class="off">
                           <a href="#" class="month">March</a> 
                              <ul class="NewsArt">
                                         <li class="turnedon">
                                          News Headline
                                       </li>
                                </ul>
                        </li>
                        <li class="off">
                           <a href="#" class="month">February</a> 
                              <ul class="NewsArt">
                                       <li>
                                          Title                                        </li>
                                </ul>
                        </li>
                </ul>
           </li>
           <li class="off">
           <a href="#" class="year">2011</a>                
                <ul class="NewsMonths">
                        <li class="off">
                           <a href="#" class="month">March</a> 
                              <ul class="NewsArt">
                                       <li>
                                         PVC4PIPES
                                       </li>
                                </ul>
                        </li>
                </ul>
           </li>
       </ul>   
      </li>
    </ul>

CsS:

.NewsSubMenuOn ul li.off ul {
display:none;

}

jquery:

  $(document).ready(function () {
    $(".turnedon").parent().parent().toggle();
});

my jquery isnt working?

Upvotes: 1

Views: 762

Answers (3)

ZapRowsdower910
ZapRowsdower910

Reputation: 3214

Try specifying what parent types it should look at:

 $(document).ready(function () {
    $(".turnedon").parent('ul').parent('ul').toggle();
});

If you look at your code paths if you go parent().parent() your selecting the ahref with class month.

Upvotes: 0

ventsislaf
ventsislaf

Reputation: 1671

Try this one:

$(document).ready(function () {
    $(".turnedon").parents('ul').toggle(true);
});​

You can check it here http://jsfiddle.net/KwdmZ/

Upvotes: 1

gilly3
gilly3

Reputation: 91497

Walk up the dom tree, showing parent elements until your element is visible:

var target = $(".turnedon").show();
var parent = target.parent();
while(target.is(":hidden")) {
    parent.show();
    parent = parent.parent();
}

Demo: http://jsfiddle.net/4arWQ/

Upvotes: 0

Related Questions