views:

98

answers:

1

Firstly I must emphasis that the HTML is pre-generated and cannot be altered - Otherwise I would not be doing it in this way : )

So....

The script and HTML below creates a nice hide/show menu, when you click the navheader the navitem becomes visible.

However I want the css class of the navheader to change based on if navitem is directly below it.

e.g.

navheader (Change Class to linksbelow)
  navitem
navheader (Change Class to NOlinksbelow)
navheader (Change Class to NOlinksbelow)
navheader (Change Class to linksbelow)
  navitem
etc....

My HTML and JQUERY:

<script>
    $(function() {
      $('.Nav table .navitem').hide();
       $('.Nav table.navheader').click(function() {
        $(this).parent().parent().next().find(".navitem").slideToggle('100');
       });
      });
</script>

<div class="Nav">

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
     <td>
      <table class="navheader">
       <tr>
        <td>
         <a class="navheader" href="#">Header Link 1</a>
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td>
      <table>
       <tr>
        <td>
         <table class="navitem">
          <tr>
           <td>
            <a class="navitem" href="#">Link 1</a>
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td>
      <table class="navheader">
       <tr>
        <td>
         <a class="navheader" href="#">Header link 2</a>
        </td>
       </tr>
      </table>
     </td>
    </tr>
</table>

</div>
+1  A: 

Ok, this specific case doesn't seem to work out when using only CSS selectors (as there's no such thing as a 'previous sibling selector'), so it'll have to be a little more complex:

$('.Nav tr:has(table.navheader)').each(function (i, elmnt) { 
    if($(elmnt).next().find('table.navitem').length > 0) 
        $(elmnt).find('table.navheader').addClass('linksbelow')
});
JorenB
Its complicated but it works, however it applies the class to the TR not the navheader.Any pointers?
danit
Oh yeah, 'scuse me, forgot about that... give me a minute, I'll try to work it out.
JorenB
I think you could just do $(...).parent().addClass('link...');
epascarello
JorenB - Thank you so much!
danit