隐藏显示详情与jquery

我有一个表，每个行有一个细节显示。隐藏显示详情与jquery

所以，当用户鼠标悬停的时候，细节会变得很明显。

我做了这个：

HTML：

<tr>  
     <td class="tdMsg"> 
      <span class='showDetail'/>Show</span> 
      <div style='display: none;' class="divDetail"> 
       // hidden div with some detail's 
      </div> 
    </td> 
    </tr>

JS：

$(".showDetail").live("mouseover", function(){ 
    $(".divDetail").hide(); 
    $(this).next().stop(true,true).fadeIn('fast'); 
}); 

$(".showDetail").live("mouseout", function(){ 
    $(".divDetail").hide(); 
});

，但我想知道，如果没有更好的方式来做到这一点，而不是puting一个div在需要详细信息的每一行中，可能使用append或其他。

ps .:这是一个快速示例来解释我正在尝试做什么，忽略用live分隔的mouseover/mouseout。

谢谢！

来源

2011-10-06 Ricardo Binns

我会说这将是这样做的最佳方式;但如果其他人有更好的选择，我也希望看到。 – rgin

也许有两个单独的TD的显示锚点和细节？并显示/隐藏td内容（innerHTML）的详细信息。这样你就限制了divs。

在未来，您可能会考虑<详细信息>标记为HTML5，它是用于切换内容。但是现在只有Chrome浏览器真的对它做任何事情（自动隐藏）。

来源

2011-10-06 12:29:51 picus

我使用了这个：https：//github.com/mathiasbynens/jquery-details，以使其适用于更多浏览器 – edelwater

我想补充的一件事就是使用JQuery来完成初始隐藏而不是内联CSS。而不是

：

<div style='display: none;' class="divDetail"> 
      // hidden div with some detail's 
     </div>

做

$('.divDetail').hide();

来源

2011-10-06 12:58:36 martincarlin87

隐藏显示详情与jquery

回答

相关问题