1

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

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

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

非常感谢任何帮助！

4

1 回答 1

0

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

});
于 2013-06-08T15:51:23.817 回答