Question

$(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。它们会影响顶部的框。

red = active
10 width = collapsed
100x100 =默认位置，

我希望所有以前的位置在激活不同的框时崩溃。如果您使用该演示，您可以注意到它是如何混乱的序列。

[编辑]

对不起，我之前没有提到过。我的主要项目要求我使用他们自己的类使用两个不同的div，但按钮和受影响的框共享相同的id。这就是我使用的原因（“＃”+ this.id）。它已经在演示中工作了。

Answer 1

首先IDS应该是唯一的 ...你有2个具有相同ID的元素... 获得所需内容的最佳方式是使用数据html5属性 ..和$.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;
  });
});

fiddle here

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

update fiddle with Css

使用jQuery选择Bug

1 个答案: