Question

我有搜索并试过这个，请帮忙！所以这就是我迄今为止完美的工作。

$('.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的背景（在这种情况下是“more-info”）在它“活动”时保持蓝色。目前我正在使用伪类作为我想要它的样本，但最终我想点击“更多信息”，文本下降，背景保持蓝色，直到我点击另一个框（或同一个盒子）;然后它失去了蓝色...

有一点需要注意，我不能使用“兄弟姐妹”，因为很明显这些导航项目不在列表中......或任何特定的顺序。

非常感谢任何帮助！

Answer 1

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

<强> CSS：

编辑此行：

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

修改和简化的HTML （You cannot have duplicate ID elements!）：

<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') ] ;
    });

});

toggleClass独特的背景

1 个答案: