は、私は以下のように箇条書きのリストを持っているのULのliリストの一番下

Question

でアコーディオン/リンクを展開します。

<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> 

私は（f1rst 3弾を示すが、クリックされた場合は残りの部分を示すために、下部にあるリンクを持っていますアコーディオン型効果）。理想的には、展開した後にもう一度圧縮するための密接なリンクもあります。

PHPでこれを行うには、どうすればいいですか？& CSSでこれを行うことはできますか？

おかげで

Answer 1

隠すグループリンク Ex。

<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(document).ready(function(){ 
    $('a#trigger').click(function() { 
     $('li ul.hidden').next().toggle('slow'); 
     return false; 
    }); 
}); 

をアコーディオンを添付するのjQueryを使用：なし。 .hiddenクラスへ http://docs.jquery.com/UI/Accordion

Answer 2

まあ、私はPHPは本当にあなたがここに欲しい答えであるとは考えていません。これは、フロントエンドに適したもののように感じます。 Google results for 'javascript accordion'をご覧ください。これは、これを最も効果的に行う方法を詳しく説明します。

---

これは厳密にCSSで行うことができると言われていますが、CSS3であり、まだ広くサポートされていない可能性があります。疑似クラス:targetについてはthis tutorial/articleを確認できました。

これを行うには、表示または非表示にするメニューのフラグメントのアクティブ/非アクティブなクラスを切り替えるURLパラメータに応答するようにスクリプトを設定します。次に、クラスに基づいて表示/非表示にするCSSルールを書くのは簡単なことです。ただし、これはサーバへの往復を意味し、メニューを崩壊させるだけであることに注意してください。

Answer 3

PHPは、クライアントサイドのソリューションです。探しているのはサーバーサイドの言語です。 Mootoolsは非常に簡単に使うことができるSlide関数を持っています。あるいは、JQueryソリューションを試すこともできます。

Answer 4

JSで簡単に実行できます。

ファーストは次に「隠すより上onclick="ShowMyLi(4,'block');"

を行う "ショーの詳細" ボタンを

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

• のような機能を備えて

  <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> 
  

  のように見えるためにあなたのベースHTMLを変更します"ボタンdo onclick="ShowMyLi(4,'none');"