Question

我有一张表格，每个行都有详细显示。

因此，当用户鼠标悬停时，详细信息将会出现。

我这样做了：

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();
});

但是我想知道是否有更好的方法来做这个而不是在需要细节的每一行中放置一个div，可能使用append或任何其他。

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

谢谢！

Answer 1

也许在两个单独的td中有节目主播和细节？并显示/隐藏细节td内容（innerHTML）。这样你就限制了div。

将来您可能会考虑＆lt; details＆gt; HTML5的标记，用于切换内容。但是现在只有Chrome真正做任何事情（自动隐藏）。

Answer 2

我要添加的一件事是使用JQuery进行初始隐藏而不是内联CSS。

而不是：

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

DO

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

用jquery隐藏显示详细信息

2 个答案: