Спрятать часть ul списка под кнопку

Тема в разделе "Верстка", создана пользователем Amazko, 15 янв 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Amazko

    Amazko #АдминОтпиши

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    569
    Симпатии:
    311
    есть вывод категорий yoo zoo списком ul
    как спрятать часть елементов списка под ссылку типа (показать все/ скрыть)
    наведу пример.

    и скрин где кликать
    Screenshot_3.png
    2 скрин при открытом списке
    Screenshot_4.png
     
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    C использованием jQuery
    HTML:
    <ul class="subRubs">
                                            <li class="show"><a href="http://catalog.ub.ua/category/legal-aid/">Правова допомога</a><span class="firms-count"> — 16 </span>
                                            </li><li class="show"><a href="http://catalog.ub.ua/category/public-organizations/">Громадські організації</a><span class="firms-count"> — 13 </span>
                                            </li><li class="show"><a href="http://catalog.ub.ua/category/charities/">Благодійні фонди</a><span class="firms-count"> — 10 </span>
                                            </li><li class="show"><a href="http://catalog.ub.ua/category/law-enforcement-organizations/">Правоохоронні організації</a><span class="firms-count"> — 7 </span>
                                            </li><li class="show"><a href="http://catalog.ub.ua/category/public-utility-companies/">Комунальні підприємства</a><span class="firms-count"> — 7 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/licensing-patenting-certification-supervision/">Ліцензування, патентування, сертифікація, нагляд</a><span class="firms-count"> — 6 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/intellectual-property-protection/">Захист інтелектуальної власності</a><span class="firms-count"> — 5 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/local-government-bodies/">Органи місцевого самоврядування</a><span class="firms-count"> — 4 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/environmental-organizations/">Природоохоронні організації</a><span class="firms-count"> — 2 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/religious-associations/">Релігійні об'єднання</a><span class="firms-count"> — 2 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/trade-unions-social-protection/">Профспілки, соцзахист</a><span class="firms-count"> — 2 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/parties/">Партії</a><span class="firms-count"> — 1 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/embassies-consulates/">Посольства, консульства</a><span class="firms-count"> — 1 </span>
                                            </li><li class="hide" style="display: none;"><a href="http://catalog.ub.ua/category/tax-and-fiscal-authorities/">Податкові та фіскальні органи</a><span class="firms-count"> — 1 </span>
                          
                    </li></ul>
                    <a onclick="$('.subRubs li.hide').show(); $(this).hide(); $('#button-1294').show();" id="button-1293">Показать</a>
                    <a onclick="$('.subRubs li.hide').hide(); $(this).hide(); $('#button-1293').show();" id="button-1294" style="display: none;">Скрыть</a>
     
    Amazko нравится это.
  3. Amazko

    Amazko #АдминОтпиши

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    569
    Симпатии:
    311
    у меня список генерируеться функцией, (ето джумла zoo). Как мне правильно ето прикрутить?
     
  4. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    Покажите какой у Вас список генерируется
     
  5. Amazko

    Amazko #АдминОтпиши

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    569
    Симпатии:
    311
    PHP:
    <ul class="sub-categories">
            <?php
           
                
    foreach ($category->getChildren() as $child) {
                    if (!
    $child->totalItemCount() && !$this->params->get('config.show_empty_categories'false)) continue;
                    
    $link $this->app->route->category($child);
                    
    $item_count = ($this->params->get('template.show_sub_categories_item_count')) ? ' <span>('.$child->totalItemCount().')</span>' '';
                    echo 
    '<li><a href="'.$link.'" title="'.$child->name.'">'.$child->name.'</a>'.$item_count.'</li>';
                }
               
            
    ?>
        </ul>
        <?php endif; ?>
     
  6. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    HTML:
    <ul class="sub-categories">
            <?php
       
             
                $showed = 5; // Сколько строк показывать
                $counter = 0;
    
                foreach ($category->getChildren() as $child) {
                    if (!$child->totalItemCount() && !$this->params->get('config.show_empty_categories', false)) continue;
                    $link = $this->app->route->category($child);
                    $item_count = ($this->params->get('template.show_sub_categories_item_count')) ? ' <span>('.$child->totalItemCount().')</span>' : '';
                 
                    if($counter<$showed)
                        echo '<li class="show"><a href="'.$link.'" title="'.$child->name.'">'.$child->name.'</a>'.$item_count.'</li>';
                    else
                        echo '<li class="hide" style="display: none;"><a href="'.$link.'" title="'.$child->name.'">'.$child->name.'</a>'.$item_count.'</li>';
                 
                    ++$counter;
                }
           
            ?>
        </ul>
        <a onclick="$('ul.sub-categories li.hide').show(); $(this).hide(); $('#button-hide').show();" id="button-show">Показать</a>
        <a onclick="$('ul.sub-categories li.hide').hide(); $(this).hide(); $('#button-show').show();" id="button-hide" style="display: none;">Скрыть</a>
        <?php endif; ?>
     
    Amazko нравится это.
  7. Amazko

    Amazko #АдминОтпиши

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    569
    Симпатии:
    311
    Список сформировался в 5 елементов, но ссылка не реагирует на клик, и ничего не происходит при нажатии.
     
  8. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    jQuery установлен? Скиньте ссылку на ваш сайт со списком
     
  9. Amazko

    Amazko #АдминОтпиши

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    569
    Симпатии:
    311
     
  10. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    Сайт у Вас какой-то аномальный:

    $('li').show()
    TypeError: Cannot read property 'show' of null

    $('body').hide();
    TypeError: Cannot read property 'hide' of null

    $('div').hide()
    TypeError: Cannot read property 'hide' of null

    document.getElementsByTagName('body').style.display="none"
    TypeError: Cannot set property 'display' of undefined