使用jquery隐藏显示细节

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，可能使用追加或任何其他。

p。:这是一个快速的例子来解释我要做什么，忽略鼠标over/mouseout与live分开。

谢谢!

Answer 1

也许把show anchor和detail放在两个单独的td中?并显示/隐藏细节内容(innerHTML)。这样你就限制了div

以后你可以考虑

标记，它意味着可切换的内容。但是现在只有Chrome对它做了一些事情(自动隐藏它)。

Answer 2

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

代替:

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

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