Форум

Dizzy · #1 (**permalink**) 25.03.2014, 20:51

Добрый вечер.
У меня появилась следующая задача:

На главной странице сайта двумя циклами выводятся категории и их дочерние категории.

<ul>
начало первого цикла
<li>Название категории</li>

<ul>
начало второго цикла цикла

<li>Название подкатегории</li>
....

конец второго цикла
</ul>

конец первого цикла
</ul>

Как-то так.

Так вот, так как ко-во дочерних категорий в каждом его родителе может быть разное, мне бы хотелось сделать джаваскриптом простую функцию скрыть/показать все, а по умолчанию, чтоб выводилось по 5 подкатегорий, например.

Что скажете?

рони · #2 (**permalink**) 25.03.2014, 20:57

Dizzy,
а нарисуйте html

Dizzy · #3 (**permalink**) 25.03.2014, 21:31

Так?

По умолчанию выводится по три дочерних категории у каждого родителя.
По клику на ссылку «Показать остальные дочерние категории» — показать остальные дочерние, которые относятся этому родителю.

<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<ul>
<li>Название родительской категории</li>

<ul>
<li>Название дочерней категории 1</li>
<li>Название дочерней категории 2</li>
<li>Название дочерней категории 2</li>
<li>Показать остальные дочерние категории</li>
</ul>


<li>Название родительской категории 2</li>

<ul>
<li>Название дочерней категории 1</li>
<li>Название дочерней категории 2</li>
<li>Название дочерней категории 3</li>
<li>Показать остальные дочерние категории</li>
</ul>
 
</ul>

</body>
</html>

рони · #4 (**permalink**) 25.03.2014, 22:14

Dizzy,

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
 <style type="text/css">
 .gold ~ li{
   display: none;
 }
      .red{
    background-color: #FF0000;
    cursor: pointer;
    opacity: 0.5
  }
  .gold{
    opacity: 1;
    background-color: #FFD700;
  }

 </style>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<ul>
<li>Название родительской категории</li>

<ul>
<li>Название дочерней категории 1</li>
<li>Название дочерней категории 2</li>
<li>Название дочерней категории 2</li>
<li>Название дочерней категории 1</li>
<li>Название дочерней категории 2</li>
<li>Название дочерней категории 2</li>
</ul>


<li>Название родительской категории 2</li>
<ul>
<li>Название дочерней категории 1</li>
<li>Название дочерней категории 2</li>
<li>Название дочерней категории 3</li>
<li>Название дочерней категории 1</li>
<li>Название дочерней категории 2</li>
<li>Название дочерней категории 2</li>
</ul>

</ul>
<script>
 $("li + ul").each(function () {
         $("li:eq(2)", this).after(
             $("<li/>", {
                 "text": "Показать остальные дочерние категории",
                 "click": function (event) {
                     $(this).toggleClass("gold")
                 },
                 "class": "gold red"
             }))
     });
</script>
</body>
</html>

Dizzy · #5 (**permalink**) 27.03.2014, 00:17

Благодарю.

Dizzy · #6 (**permalink**) 20.05.2014, 00:27

Прошу прощения за, возможно, дурацкий вопрос. Ещё раз нужна помощь.
Немного поменялась структура и добавились классы. Я сколько не пытался крутить — правильно не получается.
Структура документа:

<div class="general"> 
    <ul  class="list">
    		    <li class="group-content " style="height: 320px;">                                                       
                   <h2><a href="#" title="">Название родительской категории</a></h2>                                       
                    <div class="childlist-wrapper">
                               <ul class="childlist last">
                                 	<li><a href="#" title="#">Название дочерней категории 1</a></li>
									<li><a href="#" title="#">Название дочерней категории 2</a></li>
									<li><a href="#" title="#">Название дочерней категории 3</a></li>
                                    <li>
                                    <a class="see-all" href="#" title="#" >
                                        <span>Показать все</span>
                                    </a>
                                	</li>
                               </ul>
                       </div>
                </li>

    		    <li class="group-content " style="height: 320px;">                                                       
                   <h2><a href="#" title="">Название родительской категории 2</a></h2>                                       
                    <div class="childlist-wrapper">
                               <ul class="childlist last">
                                 	<li><a href="#" title="#">Название дочерней категории 1</a></li>
									<li><a href="#" title="#">Название дочерней категории 2</a></li>
									<li><a href="#" title="#">Название дочерней категории 3</a></li>
                                    <li>
                                    <a class="see-all" href="#" title="#" >
                                        <span>Показать все</span>
                                    </a>
                                	</li>
                               </ul>
                       </div>
                </li>				
     </ul>     
</div>

рони · #7 (**permalink**) 20.05.2014, 00:35

Dizzy,
Показать все что должно показать?

рони · #8 (**permalink**) 20.05.2014, 01:52

Dizzy,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .childlist.last  li:nth-child(n + 5){
    display: none;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function ()
  	  {
  	    $(".childlist-wrapper ul").each(function ()
  	      {
  	        $("li:eq(2)", this).after(
  	          $("<li/>",
  	            {
  	            "html": '<a class="see-all" href="#" title="#" ><span>Показать все</span></a>'
  	            }
  	          )
  	        )
  	      }
  	    );
  	    $('.see-all').click(function (event)
  	      {
  	        event.preventDefault()
  	        $(this).parent().nextAll().slideToggle("slow")
  	      }
  	    )
  	  }
  	)
  </script>
</head>

<body>
<div class="general">
    <ul  class="list">
    		    <li class="group-content " style="height: 320px;">
                   <h2><a href="#" title="">Название родительской категории</a></h2>
                    <div class="childlist-wrapper">
                               <ul class="childlist last">
                                 	<li><a href="#" title="#">Название дочерней категории 1</a></li>
									<li><a href="#" title="#">Название дочерней категории 2</a></li>
									<li><a href="#" title="#">Название дочерней категории 3</a></li>
                                    <li><a href="#" title="#">Название дочерней категории 1</a></li>
									<li><a href="#" title="#">Название дочерней категории 2</a></li>
									<li><a href="#" title="#">Название дочерней категории 3</a></li>
                               </ul>
                       </div>
                </li>

    		    <li class="group-content " style="height: 320px;">
                   <h2><a href="#" title="">Название родительской категории 2</a></h2>
                    <div class="childlist-wrapper">
                               <ul class="childlist last">
                                 	<li><a href="#" title="#">Название дочерней категории 1</a></li>
									<li><a href="#" title="#">Название дочерней категории 2</a></li>
									<li><a href="#" title="#">Название дочерней категории 3</a></li>
                                    <li><a href="#" title="#">Название дочерней категории 1</a></li>
									<li><a href="#" title="#">Название дочерней категории 2</a></li>
									<li><a href="#" title="#">Название дочерней категории 3</a></li>
                               </ul>
                       </div>
                </li>
     </ul>
</div>


</body>

</html>

Dizzy · #9 (**permalink**) 21.05.2014, 00:25

Сообщение от рони

Dizzy,
Показать все что должно показать?

Да. Премного благодарен.

Форум

Справочник

Discord чат

Курсы javascript