javascript - query 选择未被点击的div增加其宽度

Question

所以我有两个相邻的盒子类型结构， 我想为我点击的框设置动画并增加其宽度，而其他框应该在发生转换时移动到右侧

<div class="col-md-6 mb-4 mt-5">
  <a href="project1.html" class="active hovereffect">
   <div class="overlay">
     <h2 class="title">Projects 1</h2>
   </div>
   </a>
 </div>

 <div class="col-md-6 mb-4 mt-5">
   <a href="project2.html" class="hovereffect">
     <div class="overlay">
        <h2 class="title">Projects 2</h2>
     </div>
    </a>
 </div>

我点击的div应该增加宽度，其他的应该只是滑动

   $(lastElementClicked).animate({width:900})

//我希望它能够选择未被点击的 div

   var a = $(lastElementClicked).find('col-md-6:not(:click)');
   $(a).animate(slideleft)

知道如何查询选择未被点击的 div。

Answer 1

您还可以使用 .siblings() 方法作为 LGSon已经建议了，但是如果你想以自己的方式实现它，那么下面说明了一种可能的方式。

var notClicked = null;

$('.col-md-6').on('click', function() {
  $('.col-md-6').each((index, value) => {
    if(value !== this) notClicked = value;
  });
  
  console.log($(notClicked).text().trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 mb-4 mt-5">
  <a href="#" class="active hovereffect">
    <div class="overlay">
      <h2 class="title">Projects 1</h2>
    </div>
  </a>
</div>

<div class="col-md-6 mb-4 mt-5">
  <a href="#" class="hovereffect">
    <div class="overlay">
      <h2 class="title">Projects 2</h2>
    </div>
  </a>
</div>