Question

在我的HTML中，我有一个父div，里面有25个div。

<div class="container>
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
  .
  .
  .
  .
  .
</div>

我正在使用CSS网格

.container {
    display: grid;
    grid-template-columns: repeat(5, auto);
    margin: 2% auto;
    width: 750px;
    grid-gap: 1px;
}

.container > div {
    overflow: hidden;
    height: 150px;
    border: 1px solid;
}

.faces img {
    height: 150px;
}

这给了我每行5个div。

现在，当我点击任何div时，我希望它展开

$('.faces').click(function() {
  $(this).css('grid-column','span 3');
  $(this).css('grid-row','span 2');
  $(this).css('height','auto');
}):

这个JS确实有效。但我只想让被点击的元素具有这样的css属性。当单击另一个div时，前一个div应该恢复其位置。

我该怎么做？

Answer 1

我为你做了一个例子（只需点击红色框）：

＆＃13;

var lastClickedFace = null;

$(".faces").click(function(e) {
 if (lastClickedFace) {
  $(lastClickedFace).css("background-color", "red");
 }
  
 $(this).css("background-color", "green");
  
 lastClickedFace = this;
});

＆＃13;

.faces {
  width: 20px;
  height: 20px;
  background-color: red;
  margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
</div>

＆＃13;

关键是，保存＆＃34;最后点击的脸＆＃34;。在这种情况下，我们只需将其分配给名为＆＃34; lastClickedFace＆＃34;。

的变量

下次点击任何一张脸时，我们会检查此变量是否为空（这意味着我们有一个＆＃34;最后点击的脸＆＃34;）。

Answer 2

您可以先从所有面中删除样式属性，然后设置css属性。

请尝试以下操作。

$('.faces').click(function() {
  $('.faces').removeAttr('style');
  $(this).css('grid-column','span 3');
  $(this).css('grid-row','span 2');
  $(this).css('height','auto');
}); //<-- In your solution is a colon instead of semicolon

在这里，您可以阅读有关从元素中删除style属性的信息。 https://stackoverflow.com/a/16462898/7111755

还有一个更好的解决方案。您只需在JQuery中使用removeClass和addClass即可。因此，您可以创建一个具有扩展div的属性的类。

$('.faces').click(function() {
  $('.faces').removeClass('expand');
  $(this).addClass('expand');
});

在css中定义expand类

  .expand{
     grid-column: span 3;
     grid-row: span 2;
     height: auto;
  }

CSS-grid，JS-mouse onClick事件

2 个答案: