Html 使用CSS放大div，并在单击时删除同一父项下的其他div

.animate在jQuery上给我带来了麻烦，所以我想在没有它的情况下调整div的大小

我期待着扩大使用CSS框。我有4个框彼此相邻，当其中一个被点击时，它应该放大，而其余的框移出屏幕（可能所有左边的框都向左，所有右边的框都向右）。盒子是长方形的，应该也放大

我认为可以通过在CSS（.thumb:click）中创建一个新类来完成，但是如何使用Javascript/HTML来执行放大和推离屏幕

HTML:

Javascript（在使用.animate时…希望避免这种情况）

JSFiddle：

---

提前谢谢你

CSS中没有关于：单击行为的内容。所以你用JS/HTML做得很好。 我建议您使用这首关于jQuery左/右滑动的tuto：

我还将添加一个.active类来帮助您为所有div编写一个全局函数

---

希望这能有所帮助？

我在代码中看到的一个突出问题是.click（）函数和.mouseout（）函数…您应该使用.mouseenter（）执行.mouseleave（）。它们都是jQuery函数。mouseout（）是一个普通的Javascript事件处理程序。看：哦，好的，谢谢你的链接-真的很有帮助，但我想放大一个div，而不是滑动它。我以前使用过滑动效果，但我不知道在这种情况下它们会如何帮助我。现在，我将研究.active类。谢谢

            <div class="portItem">
                     <div class="itemContent-wrap">
                          <div class="itemContent">
                              <div class="container">
                                  <div class="thumbWrap">
                                      <div class="thumb"></div>
                                      <div class="thumb"></div>
                                      <div class="thumb"></div>
                                      <div class="thumb"></div>
                                  </div>
                              </div>
                          </div>
                     </div> 
            </div>

.itemContent-wrap {
  display: inline-block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}



.itemContent {
  height: 250px;
  width: auto;
  position: static;
  display: block;
  background: #ffffff;
  box-shadow: 1px 0px 20px black;
  margin-bottom: 10px;
  margin-left:-12.5%;
  margin-right:-12.5%;
  overflow-y: hidden;
}

.container {
    width: 110%;
    margin: 0 auto;
    background: transparent; 
    position: relative;
}

.thumbWrap {
  height: 220px;
  white-space: nowrap;
  width: 2000px;

}

.thumb {
  height: 200px;
  width: 450px;
  position: relative;
  display: inline-block;
  background: #D0E182;
  margin-top: 25px;
  margin-right: 5px;
}

//my guess...
.thumb:click {

}

$(document).ready(function(){
   $('.thumb').click(function()
   {
      $('.itemContent').css("cursor","pointer");
      $('.itemContent').animate({height: "500px"}, 'slow');
      $(this).animate({width: "900px",height:"400px"}, 'slow');
   });

$('.thumb').mouseout(function()
  {   
      $('.itemContent').animate({height: "250px"}, 'slow');
      $(this).animate({width: "450px",height:"200px"}, 'slow');
   });
});