Как я могу сделать аккордеон для детей, чтобы родители тоже были кликабельны? - PullRequest
Новая
       38

Как я могу сделать аккордеон для детей, чтобы родители тоже были кликабельны?

0 голосов
/ 21 января 2019

У меня на сайте применяется следующий код: 

$j(".m-accordion-item > a").click(function(e) {
  e.preventDefault();
  $j(".m-accordion-item > a").removeClass("accordian-active");
  $j(".m-accordion-nav ul ul").slideUp();
  if (!$j(this).next().is(":visible")) {
    $j(this).next().slideDown();
    $j(this).addClass("accordian-active");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="m-accordion-nav">
    <ul class="ul-reset">                                
        <li class="m-accordion-item dropArrow">
            <a href="bespoke-joinery-4-c.asp" class="">Bespoke Joinery</a>
            <ul class="ul-reset" style="display: none;">
                <li><a href="extra-21-c.asp">extra</a></li>        
                <li><a href="test-subcategory-1-5-c.asp">Test subcategory 1</a></li>        
                <li><a href="test-subcategory-10-20-c.asp">Test subcategory 10</a></li>        
                <li><a href="test-subcategory-2-13-c.asp">Test subcategory 2</a></li>        
                <li><a href="test-subcategory-3-12-c.asp">Test subcategory 3</a></li>        
                <li><a href="test-subcategory-4-19-c.asp">Test subcategory 4</a></li>        
                <li><a href="test-subcategory-5-16-c.asp">Test subcategory 5</a></li>        
                <li><a href="test-subcategory-6-17-c.asp">Test subcategory 6</a></li>        
                <li><a href="test-subcategory-7-10-c.asp">Test subcategory 7</a></li>        
                <li><a href="test-subcategory-8-14-c.asp">Test subcategory 8</a></li>        
                <li><a href="test-subcategory-9-18-c.asp">Test subcategory 9</a></li>
                <li><a href="bespoke-joinery-4-c.asp">View All</a></li>
            </ul>
        </li>
        <li class="m-accordion-item">
            <a href="doors-7-c.asp" class="">Doors</a>
        </li>
        <li class="m-accordion-item">
            <a href="windows-8-c.asp">Windows</a>
        </li>
    </ul>
</nav>

В настоящее время это работает для моих дочерних якорей, однако я изо всех сил пытаюсь найти решение, позволяющее также активировать клики моих родительских якорей.

Я знаю, что удаление e.preventDefault позволяет родителям работать, но тогда я не могу добраться до детей без работы родительского якоря.

1 Ответ

0 голосов
/ 21 января 2019

Похоже, мы не понимаем вашу реальную проблему, так как для этого не было никакого фрагмента кода HTML. Если у вас разные элементы с одинаковыми классами CSS, добавьте другой класс CSS и напишите свой JS - то, что вы сделали для ребенка. 

$j(".m-accordion-item.parent-item > a").click(function(e) {
// Your stuffs
});

$j(".m-accordion-item.child-item > a").click(function(e) {
// Your stuffs
});
...