jquery - toggleClass独特的背景

Question

我已经搜索并尝试过这个，请帮忙! 所以这就是我到目前为止所做的完美工作。

http://jsfiddle.net/ANDXJ/88/

$('.product').hide();

$('#nav a').click(function(){
    var idvar = this.id;
    var selected_item = $('#product_'+idvar);                  
    var visible_item = $('.product:visible'); 

    if( visible_item.length > 0 && selected_item.attr('id') !== visible_item.attr('id') ){
        visible_item.slideUp(function(){ selected_item.slideToggle() }); 
    }else{
        selected_item.slideToggle(); 
    }

    return false;
});

我可以完美地切换它，除了我希望 div 的背景(在本例中为“更多信息”)在“事件”时保持蓝色。目前我正在使用一个伪类来做一些我想要它做的事情的样本，但最终我想点击“更多信息”，文本下降，背景保持蓝色直到我点击另一个框(或同一个盒子)；然后它失去了蓝色......

一个警告是我不能使用“兄弟”，因为显然这些导航项不在列表中……或任何特定顺序。

非常感谢任何帮助!

Answer 1

http://jsfiddle.net/ANDXJ/93/

CSS:

编辑这一行:

.more-info:active, .more-info.active {

修改和简化的 HTML(您不能有重复的 ID 元素!):

<div class="nav">
        <a href="#">
            <div class="more-info"></div>
        </a>
</div>
<div  class="twelve columns product">  
      <p>test</p>
</div>

<div class="nav">
         <a href="#">
            <div class="more-info"></div>
        </a>
</div>
<div class="twelve columns product">  
    <p>testies</p>
</div>

jQuery

$(function() {

    $('.product').hide();

    $('.nav').click(function( e ) {
        e.preventDefault();
        var $that = $(this),
            $info = $that.find('.more-info'),
            $prod = $that.next('.product');
        $('.more-info').removeClass('active');        
        return $prod.is(':visible')?
        /* YES: */ [ $prod.slideUp(), $info.removeClass('active') ] :
        /* NO:  */ [ $('.product').slideUp(),  $prod.slideDown(), $info.addClass('active') ] ;
    });

});