Question

我想要滑动切换一个div，当用户将鼠标悬停在带有标题的div上时，该div会有更多描述。

使用Ruby的HTML：

<% @posts.each do |post|  %>
<%= link_to post do %>
  <div class="posts_index_div" id = <%=post.ticker%>>
     <div class="posts_index_inside_div">
       Header
     </div>
     <div class="posts_index_hover_div" id = <%=post.ticker%>>
       Description
     </div>
  </div>    
<%end%>

然后首先使用jQuery隐藏所有类，然后我想将slideToggle用于用户悬停的特定div。

ready = function(){
$(".posts_index_hover_div").hide();
$(".posts_index_div").hover(function(){
    $(this.id).find(".posts_index_hover_div").slideToggle();
});
};

您可以看到，ID是从模型生成的，它们对于匹配标题和描述是相同的，但它不会在特定描述中滑动。帮助

Answer 1

使用这个jQuery：

$(".posts_index_hover_div").slideToggle();
$(".posts_index_div").hover(function(){
    $(this).find(".posts_index_hover_div").slideToggle();
});

查看此工作Fiddle ..

Answer 2

this.id仅返回id名称。如果使用前缀"#"，则不是jquery对象，因此请尝试$("#"+this.id)或仅使用当前对象$(this)

$(".posts_index_div").hover(function(){
    $(this).find(".posts_index_hover_div").slideToggle();
});

或

$(".posts_index_div").hover(function(){
    $("#"+this.id).find(".posts_index_hover_div").slideToggle();
});

FIDDLE

slide在Class中按ID转换div

2 个答案: