Дано: Сложное меню с несколькими субменюшками открывающимися как slide справа. Все срабатывает, только вот идет проблема с toggle, т.е. меню открывается, а при повторном клике не закрывается.
Механизм меню:
1.Для открытия второй субменюшки нужно кликнуть по элементам меню с самого меню.
2.Третья субменюшка открывается при hover-е на элементы меню со второй субменюшки.
Собственно все это получается, однако у меня не получаетсяя реализовать эффект toggle на первом этапе, т.е. при повторном нажатии на элемент в меню, оно должно закрываться.
Проблема только в toggle эффекте, с остальным справился.
Пробовал изменить addClass и RemoveClass на toggleClass, но бестолку. Работает, но как-то немного глючить и при нажатии на элементы меню со второй субменюшки все закрывается. По идее такого быть не должно.
Пробовал повесить счетчик кликов на элемент. Однако сработало не как я ожидал.
Помогите пожалуйста именно с этим кодом. Bootstrapовский дропдаун не адаптировался к этому, а я получил кусочек кода из которого слепил эту кашицу на jquery. Менять код скорее всего не стану так как я уже показал заказчику.
P.S. Вопрос все еще сильно актуален.
console.log($('.category>li').length);
$('.category>li').click(function(event) {
$(this).siblings('li').find('.r_div').removeClass('slideRight').find('.cat_3').removeClass('slideRight');
$(this).find('.r_div').addClass('slideRight');
});
$('.cat_2>li').hover(function(event) {
$(this).siblings('li').find('.cat_3').removeClass('slideRight')
$(this).find('.cat_3').addClass('slideRight');
});
ul {
list-style: none;
position: relative;
padding: 0;
}
ul.category {
width: 100px;
}
.category li {
padding: 5px 0;
background: #eee;
cursor: pointer;
border-bottom: 1px solid #fff;
}
.r_div,
.cat_3 {
position: absolute;
top: 0;
width: 0%;
background: #eee;
left: 100%;
border-left: 3px solid #000;
padding: 0 10px;
visibility: hidden;
opacity: 0;
}
.r_div.slideRight,
.cat_3.slideRight {
visibility: visible;
width: 100px;
transition: all .3s linear;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category">
<li>
Menu #1
<div class="r_div">
<ul class="cat_2">
<li>Test
<ul class="cat_3">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>Test
<ul class="cat_3">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>Test
<ul class="cat_3">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>Test
<ul class="cat_3">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>Test
<ul class="cat_3">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
Menu #2
<div class="r_div">
<ul>
<li>Test2</li>
<li>Test2</li>
<li>Test2</li>
<li>Test2</li>
<li>Test2</li>
</ul>
</div>
</li>
<li>
Menu #3
<div class="r_div">
<ul>
<li>Test3</li>
<li>Test3</li>
<li>Test3</li>
<li>Test3</li>
<li>Test3</li>
</ul>
</div>
</li>
<li>
Menu #4
<div class="r_div">
<ul>
<li>Test4</li>
<li>Test4</li>
<li>Test4</li>
<li>Test4</li>
<li>Test4</li>
</ul>
</div>
</li>
<li>
Menu #5
<div class="r_div">
<ul class="cat_2">
<li>Test5
<ul class="cat_3">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>Test5</li>
<li>Test5</li>
<li>Test5</li>
<li>Test5</li>
</ul>
</div>
</li>
</ul>
Текущий процесс: