php - How to change the colour of current category using jquery and css? -


i developing category product. want achieve click on 1 category , current category background change. simple normal category does. however, struggle achieving it. can me sticky issue?

below code generate category

 while ( $cat = mysql_fetch_assoc( $res ) )      {          $cats[] = $cat;      }   }    $list_items = array();   foreach ( $cats $cat )  {        if ( ( int ) $cat['parent'] !== ( int ) $parent )      {          continue;      }       $current = $cat['categoryid'];     $list_items[] = '<nav><li class ="heading">';       $list_items[] = '<a href="javascript:void(0)" id ='. $cat['categoryid'].' onclick="getpage('. $cat['categoryid'] . ','.$cat['parent'].')">';     $list_items[] = $cat['name'];     $list_items[] = '</a></li>';      $list_items[] = '<ul class ="content">';      $list_items[] = category_list( $cat['categoryid'] );      $list_items[] = '</ul>';      $list_items[] = '</nav>';         $list_items[] = '';   }    $list_items = implode( '', $list_items );    if ( '' == trim( $list_items ) )  {      return '';  }    return '<div><ul>' . $list_items . '</ul></div>';  

my current query below:

jquery(document).ready(function() { jquery(".content").hide();  jquery(".heading").click(function() { jquery(this).next(".content").slidetoggle(500,function(){ $(this).parent().find('li.heading').css('background-color','green'); $(this).find('.heading').css('background-color','red'); }); }); }); 

html:

<div class="catbottom">             <?php include("category.php");echo category_list();?>         </div> 

thank much.

the process below:

in html, include category.php used generate category.
each category, when user click on category list, corresponding items displayed in div called "container"

i think should accomplish need.

$(document).on('click', '.heading', function() {     $(this).toggleclass("active");     $(this).next("ul.content").slidetoggle(); }); 

i gave css class called "active", also, based answer off html (all best guess):

<nav>     <ul>     <li class ="heading">         <a href="#">rando link</a>     </li>         <ul class ="content" style="display: none;">             <li>blah</li>         </ul>     </ul> </nav> 

and fiddle check out: http://jsfiddle.net/h2ufk/


Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -