Question

我使用以下jQuery代码来显示/隐藏DIV，具体取决于点击的div。这很好用......

但我的div正好在彼此的顶部，当点击顶部时，它们将显示在底部的底部！我可以使用CSS更改z-index但是当我这样做时，底部的那些不再可以点击了！

所以我想让jQuery把DIV带到前面，当它们不可见时，然后改回z-index！

这可能吗？

这是我的jQuery代码：

<script>
jQuery(document).ready(function() {
    jQuery(".toggle").next(".hidden").hide();
    $(this).parent().css('height', '10%');
    jQuery(".toggle").click(function() {

        $('.active').not(this).toggleClass('active').next('.hidden').slideToggle(300);
        $(this).parent().css('z-index', 999999999);
        $(this).toggleClass('active').next().slideToggle("fast");

    });
});
</script>

这是HTML：

<div id="off1" class="offers">
   <div class="toggle" style="width:100%; height:50px; background-color:#f8134a; padding:5px;">
      <div  style=" cursor:pointer; border:dashed 2px #FFF; width:90%; height:30px; margin-left:-5px; margin-top:5px; background-image:url(images/doublehearts.png); background-repeat:no-repeat; background-size:100%; font-family:'Arno Pro'; font-size:22px; color:#FFF; padding-top:5px; text-transform:uppercase;">FLOWERS</div>
   </div>
   <div class="hidden" style=" display:none; width:100%; height:100%; background-color:#FFF;"></div>
</div>
<div id="off2" class="offers2">
   <div class="toggle" style=" width:100%; height:50px; background-color:#f8134a; padding:5px;">
      <div style=" cursor:pointer; border:dashed 2px #FFF; width:90%; height:30px; margin-left:-5px; margin-top:5px; background-image:url(images/doublehearts.png); background-repeat:no-repeat; background-size:100%; font-family:'Arno Pro'; font-size:22px; color:#FFF; padding-top:5px; text-transform:uppercase;">RESTAURANTS</div>
   </div>
   <div class="hidden" style=" display:none; width:100%; height:100%; background-color:#FFF;"></div>
</div>
<div id="off3" class="offers3">
   <div class="toggle" style="width:100%; height:50px; background-color:#f8134a; padding:5px;">
      <div  style=" cursor:pointer; border:dashed 2px #FFF; width:90%; height:30px; margin-left:-5px; margin-top:5px; background-image:url(images/doublehearts.png); background-repeat:no-repeat; background-size:100%; font-family:'Arno Pro'; font-size:22px; color:#FFF; padding-top:5px; text-transform:uppercase;">Sweets & Chocolate</div>
   </div>
   <div class="hidden" style=" display:none; width:100%; height:100%; background-color:#FFF;"></div>
</div>

这里是CSS：

.offers{
  z-index:999;
  position: absolute;
  width:30%;
  height: 50%;
  overflow: hidden;
  left: 18%;
  right: 0;
  float:left;
  top: 10%;
  padding:2px;
}



.offers2{
   z-index:999;
   position: absolute;
   width:30%;
   height: 50%;
   overflow: hidden;
   left: 52%;
   right: 0;
   float:left;
   top: 10%;
   padding:2px;
}

.offers3{
  z-index:9999;
  position: absolute;
  width:30%;
  height: 50%;
  overflow: hidden;
  left: 18%;
  right: 0;
  float:left;
  top: 20%;
  padding:2px;
}

Answer 1

如果你想恢复z-index的东西，那么只需将其设置为999或将其保留为空白，以便内联z-index css消失

http://jsfiddle.net/nYjLV/1/

$(document).ready(function() {
    $(".toggle").next(".hidden").hide();
    $(this).parent().css('height', '10%');
    $(".toggle").click(function() {
        var $this = $(this);

        if( $this.hasClass('active')) {
            $this.parent().css('z-index', 999);
            $this.removeClass('active').next('.hidden').slideToggle(300);
        } else {
            $('.active').parent().css('z-index', 999);
            $('.active').removeClass('active').next('.hidden').slideToggle(300);
            $this.parent().css('z-index', 999999999);
            $this.addClass('active').next().slideToggle("fast");
        }
    });
});

或者，您可以使用

$this.parent().css('z-index', '');

这将删除z-index，因此它使用您在css中定义的那个

对于CSS，我会将所有常用项目分组到课程中。将所有类更改为商品而不是商品1/2/3

.offers {
    // common attributes
}

#off1 {
    // differences like left and top attribute
}

http://jsfiddle.net/nYjLV/4/ css / html已更新

使用jQuery点击z-index属性？

1 个答案: