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
Post a Comment