Question

This是我要修改的内容。我尝试过

    <h1>Gallery</h1>

      <div class="gallery-wrap">
      <div class="item item-1"></div>
      <div class="item item-2"></div>
      <div class="item item-3"></div>
      <div class="item item-4"></div>
      <div class="item item-5"></div>
   </div>

但是当我释放鼠标左键时，它会缩小到原来的宽度。

我更想实现这样的目标

{{1}}

https://jsfiddle.net/s2n3f6em/11/

但是它需要我不擅长的javascript。

Answer 1

您可以通过使用jQuery更改.active上的.item类的切换来实现它

jQuery('.item').click(function(){
   //check if clicked in an opened item | this closes an opened item
   if(jQuery(this).hasClass('active')){
     jQuery(this).removeClass('active'); return;
   }
   jQuery('.item').each(function(){ //remove .active from all 
    jQuery(this).removeClass('active');
   })
   jQuery(this).toggleClass('active'); //toggle .active from current
});

.panel {
   height: 100vh;
}
.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.3s ease;
}
.item.active {
  flex: 7;
}

.panel.red {
  background-color: red;
}

.panel.green {
  background-color: green;
}

.panel.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Gallery</h1>

      <div class="gallery-wrap">
      <div class="item item-1 panel red"></div>
      <div class="item item-2 panel blue"></div>
      <div class="item item-3 panel green"></div>
      <div class="item item-4 panel red"></div>
      <div class="item item-5 panel blue"></div>
   </div>

Answer 2

您可以尝试使用焦点

#item:focus {
   width: 200px;
}

尝试玩这个https://www.w3schools.com/cssref/sel_focus.asp

我正在尝试修改此CSS代码。每当我单击它时，如何防止其缩小

2 个答案: