slideToggle удалить другие активные классы

У меня есть простой слайдер меню/аккордеона. Я хочу добавить class = "active" к нажатой ссылке и сдвинуться вниз, чтобы показать UL. Когда нажимается другой отдельный элемент меню, активный класс следует удалить из предыдущего элемента и добавить к только что нажатому. Также если в активном режиме нажать одно и то же нажатие, слайдер должен сдвинуться вверх и удалить активный класс.slideToggle удалить другие активные классы

Я пробовал различные конфигурации ниже, но каждый раз у меня возникают проблемы с удалением активного класса, если одно и то же нажатие сдвинется вверх. Любая помощь приветствуется.

$(document).ready(function(menuSlide) { 
    $('li.menu-item-has-children a').click(function() {   
     if ($('li.menu-item-has-children a').hasClass('active')) { 
      $('li.menu-item-has-children a').removeClass('active'); 
     } 
     else { 
      $(this).addClass('active'); 
     } 

     $(this).next('ul').slideToggle(); 
     $(this).parent().siblings().children().next().slideUp(); 

     return false; 
    }); 
});

Update - создали быстрый JSFiddle, который демонстрирует проблему, извинение за не делать на открытие вопроса. Вы можете видеть, что если один и тот же элемент нажат, чтобы переключиться, состояние остается активным.

источник

2015-07-28 d1ch0t0my

Можем ли мы также видим соответствующий HTML ? Помогает узнать структуру обрабатываемых элементов. –

Удалите 'else' из вашего условия. Если ваш якорный тег активен в классе, он не будет устанавливать новый класс. В основном вы говорите: если какие-либо анкеры имеют активное имя класса, удалите его. Если у неявных тегов имя класса активно, установите его. – NewToJS

Было бы намного проще, если бы у вас был HTML-код с вашим JavaScript. Может быть, вы могли бы создать пример в [js-fiddle] (http://jsfiddle.net/), который иллюстрирует вашу проблему? –

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

$(document).ready(function(menuSlide) { 
 
    var $as = $('li.menu-item-has-children a').click(function() { 
 
    $(this).toggleClass('active').next('ul').slideToggle(); 
 
    $(this).parent().siblings().children('ul').slideUp(); 
 
    $(this).parent().siblings().children('.active').removeClass('active'); 
 
    return false; 
 
    }); 
 
});

.menu-item-has-children ul { 
 
    display: none; 
 
} 
 
a.active { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu-item-has-children"> 
 
    <a>1</a> 
 
    <ul> 
 
     <li>1.1</li> 
 
     <li>1.2</li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item-has-children"> 
 
    <a>1</a> 
 
    <ul> 
 
     <li>1.1</li> 
 
     <li>1.2</li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item-has-children"> 
 
    <a>1</a> 
 
    <ul> 
 
     <li>1.1</li> 
 
     <li>1.2</li> 
 
    </ul> 
 
    </li> 
 
</ul>

источник

2015-07-28 10:36:45

Я думаю, что ошибка OP с условием else. Это хорошее решение, но не объясняет причину проблемы. – NewToJS

http://jsfiddle.net/arunpjohny/dhgrtwm3/ –

Это отлично работает для меня, но я все равно хотел бы понять, где я ошибся в своем исходном коде. Спасибо, Арун. – d1ch0t0my

Мы просто сохранить предыдущий щелчок DIV в переменной, а затем скользить вверх, что DIV по щелчку:

var previousElement = 0; 
$(document).ready(function(menuSlide) { 
    $('li.menu-item-has-children a').click(function() { 

    if ($('li.menu-item-has-children a').hasClass('active')) { 
     $('li.menu-item-has-children a').removeClass('active'); 
     previousElement = 0; 
    }else { 
     $(this).addClass('active'); 
     if(previousElement != 0) { 
      $(previousElement).removeClass('active'); 
      $(previousElement).slideUp(); 
     } 
     previousElement = this; 
    } 

});

источник

2015-07-28 10:42:01 Solutionswithus

Самый простой способ,

$(document).ready(function(){ 
 
     $('li.menu-item-has-children .content').slideUp(); 
 
     $(document).on('click','li.menu-item-has-children a',function(e){ 
 
     e.preventDefault(); 
 
     $this = $(this); 
 
     $('li.menu-item-has-children a').removeClass('active'); 
 
     $this.addClass('active'); 
 
     $('li.menu-item-has-children a').parent().find('.content').slideUp(); 
 
     $this.parent().find('.content').slideDown(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
\t <ul> 
 
\t \t <li class="menu-item-has-children"> 
 
\t \t \t <a href="#">A</a> 
 
\t \t \t <div class="content"> 
 
\t \t \t \t AAAA AAAA AAAA 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li class="menu-item-has-children"> 
 
\t \t \t <a href="#">B</a> 
 
\t \t \t <div class="content"> 
 
\t \t \t \t BBBB BBBB BBBB 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li class="menu-item-has-children"> 
 
\t \t \t <a href="#">C</a> 
 
\t \t \t <div class="content"> 
 
\t \t \t \t CCCC CCCC CCCC 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t </ul> 
 
</html>

источник

2015-07-28 10:45:17

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

$(document).ready(function(menuSlide) { 
    $('li.menu-item-has-children a').click(function() { 
     console.log($(this).hasClass('active')); 
     if($(this).hasClass('active') == false) 
     { 
     if ($('li.menu-item-has-children a').hasClass('active')) { 
      $('li.menu-item-has-children a').removeClass('active'); 
     } 
     else { 
      $(this).addClass('active'); 
     } 

     $(this).next('ul').slideDown(); 
     $(this).parent().siblings().children().next().slideUp(); 
     } 
     return false; 
    }); 
});

источник

2015-07-28 10:57:32

slideToggle удалить другие активные классы

ответ

Смежные вопросы