-1 
$(document).ready(function(){
    $(".lower_it").click(function() {
        $("#" + this.id).toggleClass("active")
        $("#" + this.id).siblings(".itemContainer").toggleClass("hide")     
        $(".itemContainer").not("#" + this.id).removeClass("active");
        return false;
    });
});

演示 - http://jsfiddle.net/JKnjz/60/

底部的条纹是导航按钮 1、2、3。它们影响顶部的框。

  • 红色 = 活跃
  • 10 宽度 = 折叠
  • 100x100 = 默认位置，

我希望在激活不同的盒子时所有以前的位置都折叠起来。如果你玩这个演示，你会注意到它是如何打乱序列的。

[编辑]

抱歉，我之前没有提到这一点。我的主要项目要求我使用两个不同的 div 使用它们自己的类，但按钮和效果框共享相同的 id。这就是我使用 ("#" + this.id) 的原因。它已经在演示中工作。

4

1 回答 1

0

首先，IDS 应该是唯一的...您有 2 个具有相同 ID 的元素...获得所需内容的最佳方法是使用data html5 属性..$.data()并获取特定的 data 属性。

 <div>
   <div id="lol1" class="itemContainer">1</div>
   <div id="lol2" class="itemContainer">2</div>
   <div id="lol3" class="itemContainer">3</div>
  </div>
 <div>
 <div data-id="lol1" class="lower_it">1</div>
 <div data-id="lol2" class="lower_it">2</div>
 <div data-id="lol3" class="lower_it">3</div>

不改变你的大部分核心逻辑..

$(document).ready(function(){
  $(".lower_it").click(function() {
    $("#" + $(this).data('id')).toggleClass("active").removeClass("hide"); //<---remove class hide
    $("#" + $(this).data('id')).siblings().addClass("hide")   //<--addclass hide to all siblings.
    $(".itemContainer").not("#" + $(this).data('id')).removeClass("active");
    return false;
  });
});

在这里摆弄

但是，您必须添加 CSS 以将背景颜色添加到 losser_it div...为所有 div 添加类...这只是一个示例，您可以根据需要修改 CSS。

用 Css 更新小提琴

于 2013-08-05T09:56:16.760 回答