Question

我是Js和jQuery的新手，当我将鼠标悬停在另一个上时，我设法在div上设置了一个宽度变化动画。但是，当我放置3个相似的div组时，将其悬停在一个div上会触发所有其他div。我试着把一些＆＃34;这个＆＃34;和＆＃34; next（）＆＃34;但它完全停止了工作。请你赐教。谢谢

这是代码。

https://jsfiddle.net/HiD3f/LmbaL1qo/2/

<html>
   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>

   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>

   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>
</html>

<style>
  .searchBlock {
     display : inline-block;
     height: 50px;
     background : red;  
  }
  .hidden {
     width: 0; 
     transition : width 0.4s ease-in
  }
  .shown {
     width: 300px;
     transition : width 0.4s ease-in
  }
  .mapHideBtn {
     display : inline-block;
     width: 50px;
     height: 50px;
     background : green;
  }
</style>

<script>
  $('.mapHideBtn').hover(function(){
  if ($(this).hasClass("collapsed")) {
    $('.searchBlock').removeClass("hidden").addClass("shown");
    $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
  } 

  else {
   $('.searchBlock').removeClass("shown").addClass("hidden");
   $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
  };
});

Answer 1

您可以使用$(this).next()和toggleClass() DEMO

$('.mapHideBtn').hover(function(){
  $(this).next().toggleClass('shown');
});

更新：如果您希望红色栏悬停在其上时保持打开状态，则可以使用此纯CSS方法DEMO或将.searchBlock置于.mapHideBtn DEMO < / p>

Answer 2

您需要将jQuery选择器更改为$(this)和$(this).next()。

您遇到的是一种循环，它找到您标记的所有选择器并在其上运行规则。

这是一个固定的小提琴：https://jsfiddle.net/LmbaL1qo/5/

以下是代码：

$('.mapHideBtn').hover(function() {
  if ($(this).hasClass("collapsed")) {
    $(this).next().removeClass("hidden").addClass("shown");
    $(this).removeClass("collapsed").addClass("expanded");
  } else {
    $(this).next.removeClass("shown").addClass("hidden");
    $(this).removeClass("expanded").addClass("collapsed");
  };
});

Answer 3

解决方案很简单：

<script>
    $('.mapHideBtn').hover(function(){
    if ($(this).hasClass("collapsed")) {
        $(this).next().removeClass("hidden").addClass("shown");
        $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
    } 

    else {
        $('.searchBlock').removeClass("shown").addClass("hidden");
        $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
    }
});
</script>

jQuery只在一个元素上悬停动画而不是其他类似的元素

3 个答案: