Question

我正在开发一个产品类别。我想要实现的只需点击一个类别，然后这个当前的类别背景就会改变。它只是简单的正常类别。但是，我很难实现它。任何人都可以帮我解决这个棘手的问题吗？

以下是生成类别的代码

 while ( $cat = mysql_fetch_assoc( $res ) ) 
    { 
        $cats[] = $cat; 
    } 

} 


$list_items = array(); 

foreach ( $cats as $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>';

我目前的查询如下：

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>

非常感谢。

流程如下：

在html中，我包含了用于生成类别的category.php 对于每个类别，当用户单击类别列表时，相应的项目将显示在名为“容器”的div中

Answer 1

我认为这应该能满足你的需求。

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

我为你的CSS提供了一个名为“active”的类，同样，我将这个答案基于这个HTML（所有最好的猜测）：

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

要检查出来的小提琴：http://jsfiddle.net/h2ufk/

如何使用jquery和css更改当前类别的颜色？

1 个答案: