JQuery只动画一个单元格

JQuery animate only one cell

本文关键字：一个 单元格 动画 JQuery      更新时间：2023-09-26

我目前正在学习JQuery，想知道如何从表中只影响一个单元格?这是我的小提琴https://jsfiddle.net/amosangyongjian/mmqasf5t/4/

这是jquery代码 
$(document).ready(function(){
    $("td").hover(function(){
    $(this).siblings(".expand").slideDown("slow");
  },function(){
    $(this).siblings(".expand").slideUp("slow");
  });
});

我试过其他几种方法，但似乎都不起作用。

请帮助。谢谢你

试试这个:

$(document).ready(function(){
	$("td").hover(function(){
  		$(this).find(".expand").slideDown("slow");
  	},function(){
  		$(this).find(".expand").slideUp("slow");
  	});
});
td {
  padding:10px;
}
.expand {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello1</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello2</p>
  </td>
</tr>
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello3</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello4</p>
  </td>
</tr>
</table>

td与.expand没有任何兄弟姐妹。但是，p可以。

因此您有两种选择，要么将事件侦听器设置为td p，这也会影响您可以悬停的区域。所以你真正想要的可能是改变:

$(this).siblings(".expand") 

$(this).children(".expand")


$("td").hover(function(){
  $(this).children(".expand").slideDown("slow");
}, function(){
  $(this).children(".expand").slideUp("slow");
});
td {
  padding:10px;
}
.expand {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello1</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello2</p>
  </td>
</tr>
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello3</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello4</p>
  </td>
</tr>
</table>

    this is correct way when you choose via $("td")
        $(document).ready(function(){
            $("td").hover(function(){
            $(this).find(".expand").slideDown('slow');
          },function(){
            $(this).find(".expand").slideUp("slow");
          });
        });
or
 $(document).ready(function(){
            $("td").hover(function(){
            $(this).children(".expand").slideDown('slow');
          },function(){
            $(this).children(".expand").slideUp("slow");
          });
        });
    your code also work when you change your code $("td p")
     $("td p") -siblings will  .expand
     $("td") -siblings will another td datas
    because siblings will it get previous element.
相关文章：