jQuery 单击此，隐藏其他 div，展开以显示当前 div 中的内容，再次单击以显示其他 div 并将其返回到原始大小/位置答案

【问题标题】：jQuery click this, hide other divs, expand to show content in current div, click again to reveal other divs and return this to original size/positionjQuery 单击此，隐藏其他 div，展开以显示当前 div 中的内容，再次单击以显示其他 div 并将其返回到原始大小/位置
【发布时间】：2020-11-27 11:20:53
【问题描述】：

我想点击一个 div 来：

扩展它以显示更多内容，同时
同时放在左上角，
改变背景颜色和
隐藏其兄弟姐妹。

再次点击 div 以：

同时切换其返回原始大小和颜色
同时使兄弟姐妹重新出现在原来的位置。

每个 div 的这种行为都是相同的。

$('.action').click(function() {
 $('.action').toggle();
 $(this).show()
        .animate({ backgroundColor: '#ff9999', width: '90%' }, 500)
        .children().show()
});

.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 500px;
padding: 30px;
margin-bottom: 40px;
background-color: #bbb;
}
.action {
display: flex;
justify-content: center;
align-items: center;
width: 45%;
height: 50px;
background-color: lightblue;
margin: 10px;
}
.content {
display: none;
padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">  
  <div class="action">
    <p>...action 1</p>
    <div class="content">
      <ol><h3>Content 1</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 2</p>
    <div class="content">
      <ol><h3>Content 2</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 3</p>
    <div class="content">
      <ol><h3>Content 3</h3>
        <li>List item</li>
        <li>List item</li>
     </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 4</p>
    <div class="content">
      <ol><h3>Content 4</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 5</p>
    <div class="content">
      <ol><h3>Content 5</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 6</p>
    <div class="content">
      <ol><h3>Content 6</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">  
  <div class="action">
    <p>...action 1</p>
    <div class="content">
      <ol><h3>Content 1</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 2</p>
    <div class="content">
      <ol><h3>Content 2</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 3</p>
    <div class="content">
      <ol><h3>Content 3</h3>
        <li>List item</li>
        <li>List item</li>
     </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 4</p>
    <div class="content">
      <ol><h3>Content 4</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 5</p>
    <div class="content">
      <ol><h3>Content 5</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 6</p>
    <div class="content">
      <ol><h3>Content 6</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
</div>

【问题讨论】：

标签： jquery toggle hide show

【解决方案1】：

试试这个 -

$('.action').click(function() {
  if(!$(this).hasAttr('data-w')){
//store the width for re-use
    $(this).prop('data-w',$(this).width());
    $(this).animate({ backgroundColor: '#ff9999', width: '90%' }, 500)
        .children().show();
  }
  else{
    $(this).show()
        .animate({ backgroundColor: '#ff9999', width: $(this).prop('data-w') }, 500)
        .children().show();
    $(this).removeAttr('data-w')
  }
 
});

【讨论】：

嘿布林！如果.action元素被点击，是不是已经可见了？

【解决方案2】：

你可以这样做：

$('.action').click(function() {
  let siblings = $(this).siblings();
  if (siblings.length === siblings.filter(':visible').length) {
    siblings.hide();
    $(this).animate({
        backgroundColor: '#ff9999',
        width: '90%'
      }, 500)
      .children('.content').show();
  } else {
    siblings.show();
    $(this).animate({
        backgroundColor: '#add8e6',
        width: '45%'
      }, 500)
      .children('.content').hide();
  }
});

.wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 500px;
  padding: 30px;
  margin-bottom: 40px;
  background-color: #bbb;
}

.action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45%;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

.content {
  display: none;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">
  <div class="action">
    <p>...action 1</p>
    <div class="content">
      <ol>
        <h3>Content 1</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 2</p>
    <div class="content">
      <ol>
        <h3>Content 2</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 3</p>
    <div class="content">
      <ol>
        <h3>Content 3</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 4</p>
    <div class="content">
      <ol>
        <h3>Content 4</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 5</p>
    <div class="content">
      <ol>
        <h3>Content 5</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 6</p>
    <div class="content">
      <ol>
        <h3>Content 6</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
</div>

【讨论】：