За последние 24 часа нас посетили 16956 программистов и 1180 роботов. Сейчас ищут 1660 программистов ...

Как настроить метод toggle() для конкретной категории?

Тема в разделе "JavaScript и AJAX", создана пользователем Flip, 8 июн 2022.

  1. Flip

    Flip Активный пользователь

    С нами с:
    9 мар 2008
    Сообщения:
    42
    Симпатии:
    0
    Здравствуйте.

    Помогите настроить toggle(), чтобы отображать/скрывать элементы для конкретной категории. Сейчас, при нажатии на кнопку у любой категории, скрытые элементы отображаются напротив ссылок всех категорий.

    Количество категорий не статическое, может уменьшаться или увеличиваться.

    Вот код:

    HTML:
    1.     <style>
    2.         .toggle{
    3.             display:none;
    4.         }
    5.     </style>
    6. </head>
    7.  
    8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    9.  
    10. <p><b>Категория 1</b>&nbsp;<button class="button">&#9998;</button></p>
    11. <div>
    12.    <div>Ссылка 1<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    13.    <div>Ссылка 2<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    14. </div>
    15.  
    16. <p><b>Категория 2</b>&nbsp;<button class="button">&#9998;</button></p>
    17. <div>
    18.    <div>Ссылка 1<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    19.    <div>Ссылка 2<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    20.    <div>Ссылка 3<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    21.    <div>Ссылка 4<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    22. </div>
    23.  
    24. <p><b>Категория 3</b>&nbsp;<button class="button">&#9998;</button></p>
    25. <div>
    26.    <div>Ссылка 1<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    27.    <div>Ссылка 2<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    28.    <div>Ссылка 3<a class="toggle" style='color: red;'>&nbsp;&nbsp;x</a></div>
    29. </div>
    30.  
    31. <script type="text/javascript">
    32.     $('.button').click(function(){
    33.    
    34.         $('.toggle').toggle();
    35.    
    36.     })
    37. </body>
    38. </html>
     
  2. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.852
    Симпатии:
    746
    Адрес:
    Татарстан
    Ну задайте доп класс для нужных кнопок, и отрабатывали только по нему