jQuery slideToggle（）問題 - 更改顯示：塊以顯示：內聯表？

Question

我正在使用jQuery的slideToggle（）函數來控制我網站的展開/摺疊功能。目前，我在整個網站上實施之前只有一個已經開發的頁面; here it is。

默認情況下，jQuery slideToggle（）使用display =「block」這不是幫助我。我想讓它使用display =「inline-table」而不是當面板展開時，並且在同一面板摺疊時恢復爲display =「none」。

有我申請到CSS，以確保佈局是我希望它是一些設置：

.specs { 
    width: 930px; 
    height: 100px; 
    border: none; 
    color: #ffffff; 
    font-weight: normal; 
    display: none; 
} 

height屬性是用來保證內所有的圖標面板完全可見。刪除它會導致像「Memory」這樣的小面板切斷一半圖標。

同時坍縮，面板被設置爲顯示=「無」，以確保它們不會影響佈局。但是，在擴展時，需要將它們設置爲display =「inline-table」以繞過您在查看諸如「Web瀏覽」和「後置攝像頭」等面板時可以看到的一些對齊問題（基本上，列表重疊下面的DIV以及行內表設置修復了這些問題）。

只要我能解決這個問題，我可以繼續實施這個設計到其他頁面。

P.S. - 目前正在使用，是Redsquare's method，所以擴大是好的，但他們不想崩潰。

謝謝，
迪倫。

Answer 1

這似乎對我有用。使用min-height代替height

.specs { 
    width: 930px; 
    /*min-height: 100px; CHECK UPDATE */ 
    border: none; 
    color: #ffffff; 
    font-weight: normal; 
    display: none; 
} 

UPDATE：看到它在行動在http://jsfiddle.net/LLQyV/1/

試試這個。從CSS中刪除最小高度。

在你的HTML中，將div中的每個規範都包含在toggleContainer中，如下所示（我重複了您的常規類別併爲每個類別添加了各種規範。）

<!-- General --> 
<div class="toggleContainer"> 
<div class="spec-cat"> 
<div class="spec-cat-content" id="general"><a href="#general">General</a> 
<span class="spec-cat-desc"></span></div> 
</div> 
<div class="specs" id="sec1"> 
    <ul> 
     <li>Manufactured by HTC</li> 
     <li>Also known as HTC Ville and HTC Z520e</li> 
     <li>Released in March 2012</li> 
     <li>£429 (GBP); $399 (USD)</li> 
     <li>Manufactured by HTC</li> 
     <li>Also known as HTC Ville and HTC Z520e</li> 
     <li>Released in March 2012</li> 
     <li>£429 (GBP); $399 (USD)</li> 
    </ul> 
</div> 
</div> 

<!-- General --> 
<div class="toggleContainer"> 
<div class="spec-cat"> 
<div class="spec-cat-content" id="general"><a href="#general">General</a> 
<span class="spec-cat-desc"></span></div> 
</div> 
<div class="specs" id="sec1"> 
    <ul> 
     <li>£429 (GBP); $399 (USD)</li> 
    </ul> 
</div> 
</div> 

<!-- General --> 
<div class="toggleContainer"> 
<div class="spec-cat"> 
<div class="spec-cat-content" id="general"><a href="#general">General</a> 
<span class="spec-cat-desc"></span></div> 
</div> 
<div class="specs" id="sec1"> 
    <ul> 
     <li>Manufactured by HTC</li> 
     <li>Also known as HTC Ville and HTC Z520e</li> 
    </ul> 
</div> 
</div> 

然後在您的JS文件做到這一點（我結合你的所有的onclick = '切換' 調用到這一點）

$(function() { 
    $(".toggleContainer").each(function() { 
     //store the .specs height to an unchanging attribute 
     $(this).find(".specs").attr("specHeight", $(this).find(".specs").height()); 

     //when the cat is clicked, expand or collapse the spec 
     $(this).find(".spec-cat-content").click(function(e) { 
      e.preventDefault(); 
      //find spec for current toggleContainer that contains this category toggle button 
      var spec = $(this).parent().parent().find(".specs"); 

      //check to see if the spec is displayed. 
      if ($(spec).css("display") == "none") { 
       //if it isn't then animate to specHeight attr and display block    $(spec).height(0); 
       $(spec).css("display","block"); 
       var newHeight=$(spec).attr("specHeight"); 
       if(newHeight<100) 
        newHeight=100; 
       $(spec).animate({height:newHeight},400); 
      } 
      else { 
       //if it is, then animate to 0 height, and display:none 
       $(spec).animate({height:0},400,function(){$(spec).css("display","none");}); 

      } 
     }); 
    }); 
});​ 

Answer 2

您不必使用slideToggle（）內置函數，創建自己的函數。

使用.toggleClass（）：http://api.jquery.com/toggleClass/

事情是這樣的：

CSS：

.DisplayNone{ 
    display: none; 
} 

.DisplayInlineTable{ 
    display: inline-table; 
} 

然後創建onclick事件：

的jQuery：

$(parent).click(function(){ 
    $(child).toggleClass("DisplayInlineTable").slideToggle(); 
});