隱藏顯示詳情與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

回答

相關問題