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

您也可以按照LGSon的建议使用.siblings()方法，但是如果您想以自己的方式实现它，那么以下内容说明了一种可能的方法。

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>

查询选择未单击以增加其宽度的div

1 个答案: