擴大在UL李列表的底部手風琴/鏈接

我有如下一個符號列表：擴大在UL李列表的底部手風琴/鏈接

<ul> 
<li> 
    text1 here  
</li> 
<li> 
    text2 here  
</li> 
<li> 
    text3 here   
</li> 
<li> 
    text4 here   
</li> 
<li> 
    text5 here   
</li> 
<li> 
    text6 here   
</li> 
<li> 
    text7 here   
</li> 
</ul>

我只顯示了不當或疏忽; 3發子彈，但在底部的鏈接，以顯示其餘的如果點擊（手風琴式的效果）。理想情況下，我還會有一個緊密鏈接，在擴展後再次壓縮它。

什麼是最好的方式來做到這一點與PHP &我可以這樣做只是與CSS？

感謝

來源

2012-01-19 user991830

您對手風琴使用哪種腳本？可能有隱藏的方法，只需附加相應的處理程序 –

實際上，如果使用'：target'選擇符，則只能在現代瀏覽器中使用CSS。 – kapa

想隱藏的組鏈接例。

<li>Text 1</li> 
<li>Text 2</li> 
<li>Text 3</li> 
<li class="hidden"> 
<ul> 
    <li>Text 4</li> 
    <li>Text 5</li> 
    <li>Text 6</li> 
</ul> 
</li>

而且使用jQuery手風琴重視它

jQuery(document).ready(function(){ 
    $('a#trigger').click(function() { 
     $('li ul.hidden').next().toggle('slow'); 
     return false; 
    }); 
});

當然你得給顯示：無;隱藏課程 http://docs.jquery.com/UI/Accordion

來源

2012-01-19 13:48:30

好了，我不相信PHP真的是你想在這裏回答。這感覺像是更適合前端的東西。看看Google results for 'javascript accordion'，這將詳細介紹如何最好地做到這一點。

這就是說你可以用嚴格的CSS做到這一點，但它是CSS3，可能還沒有得到廣泛的支持。可以查看this tutorial/article關於:target僞類。

您可能通過設置您的腳本來響應URL參數來切換您想要隱藏或顯示的菜單片段上的活動/非活動類，從而在PHP和CSS中執行此操作。然後它是一個簡單的事情，根據類來編寫CSS規則來顯示/隱藏。但請記住，這可能意味着往返您的服務器，然後返回來摺疊菜單。

來源

2012-01-19 13:41:09 cspray

PHP是一種服務器端語言，您正在尋找的是客戶端解決方案。 Mootools有一個Slide功能，你可以很容易地使用，或者你可以嘗試一個JQuery解決方案Here's a list玩得開心:)

來源

2012-01-19 13:45:29 haider

你可以很容易地用JS做到這一點。

首先改變你的基本HTML看起來像

<ul> 
<li id="myli1"> 
    text1 here  
</li> 
<li id="myli2"> 
    text2 here  
</li> 
<li id="myli3"> 
    text3 here   
</li> 
<li id="myli4" style="display:none;"> 
    text4 here   
</li> 
<li id="myli5" style="display:none;"> 
    text5 here   
</li> 
<li id="myli6" style="display:none;"> 
    text6 here   
</li> 
<li id="myli7" style="display:none;"> 
    text7 here   
</li> 
</ul>

然後包括像

function ShowMyLi(fromnr,displaystyle) { 
    var o=document.getElementById("myli"+fromnr); 
    if (!o) return; 
    o.style.display="block"; 
    var cmd="ShowMyLi("+(fromnr+1).toString()+",'"+displaystyle+"');"; 
    window.setTimeout(cmd,150); 
}

功能「查看更多」按鈕做onclick="ShowMyLi(4,'block');"
在「隱藏更多「按鈕做onclick="ShowMyLi(4,'none');"

來源

2012-01-19 13:47:57

擴大在UL李列表的底部手風琴/鏈接

回答

相關問題