развернуть аккордеон / ссылку внизу списка ul li - PullRequest
Новая
       14

развернуть аккордеон / ссылку внизу списка ul li

0 голосов
/ 19 января 2012

У меня есть список маркеров, как показано ниже: 

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

Спасибо

Ответы [ 4 ]

1 голос
/ 19 января 2012

Вы можете довольно легко сделать это с помощью 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');"
1 голос
/ 19 января 2012

Ну, я не верю, что PHP - это действительно тот ответ, который вам нужен здесь.Похоже, что-то лучше подходит для переднего конца.Посмотрите на результаты Google для 'javascript accordion' , в которых подробно описано, как вы можете это сделать наилучшим образом.

При этом можно сказать, что вы можете сделать это только с помощью CSS, однако этоCSS3 и, возможно, еще не получили широкой поддержки.Можно проверить этот учебник / статью о псевдоклассе :target.

Вы можете сделать это в PHP и CSS, настроив свой сценарий для ответа напараметр URL, который переключает активный / неактивный класс на фрагменты меню, которые вы хотите скрыть или показать.Тогда нужно просто написать правила CSS для отображения / скрытия на основе класса.Однако имейте в виду, что это может означать обратное путешествие к вашему серверу и обратно, чтобы просто свернуть меню.

0 голосов
/ 19 января 2012

Групповая ссылка, в которой вы хотите скрыться 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, чтобы прикрепить к нему аккордеон 

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

Конечно, вы должны дать дисплей: нет; в скрытый класс http://docs.jquery.com/UI/Accordion

0 голосов
/ 19 января 2012

PHP - это язык на стороне сервера. То, что вы ищете, это решение на стороне клиента. Mootools имеет функцию Slide , которую вы можете использовать очень легко, или вы можете попробовать решение JQuery Вот список весело проведите время:)

...