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>

我只展示了前3个子弹，但在底部有一个链接，以显示其余部分（手风琴类型效果）。理想情况下，我还有一个紧密的链接，可以在扩展后再次压缩它。

使用PHP和PHP执行此操作的最佳方法是什么？我能用CSS做到这一点吗？

由于

Answer 1

好吧，我不相信PHP真的是你想要的答案。这感觉就像是更适合前端的东西。看一下Google results for 'javascript accordion'，详细说明如何做到这一点。

据说你可以用严格的CSS做到这一点，但它是CSS3，可能还没有被广泛支持。可以查看有关:target伪类的this tutorial/article。

您可以在PHP和CSS中执行此操作，方法是设置脚本以响应URL参数，该参数切换要隐藏或显示的菜单片段上的活动/非活动类。然后，根据类编写CSS规则以显示/隐藏它的简单问题。但请记住，这可能意味着往返服务器并返回只是为了折叠菜单。

Answer 2

你可以很容易地用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');"

Answer 3

PHP是一种服务器端语言，您正在寻找的是客户端解决方案。 Mootools有一个Slide函数，你可以很容易地使用它，或者你可以尝试一个JQuery解决方案Here's a list玩得开心：）

Answer 4

您要隐藏的群组链接实施例

<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将accordion附加到它

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

当然你必须给出display：none;到.hidden类 http://docs.jquery.com/UI/Accordion

扩展ul li列表底部的accordion / link

4 个答案: