#javascript #html #jquery #css
Дано:
Сложное меню с несколькими субменюшками открывающимися как 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;
}
-
Menu #1
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
-
Menu #2
- Test2
- Test2
- Test2
- Test2
- Test2
-
Menu #3
- Test3
- Test3
- Test3
- Test3
- Test3
-
Menu #4
- Test4
- Test4
- Test4
- Test4
- Test4
-
Menu #5
- Test5
- submenu
- submenu
- submenu
- submenu
- submenu
- Test5
- Test5
- Test5
- Test5
- Test5
Ответы
Ответ 1
console.log($('.category>li').length); $('.category > li').click(function(event) { $(this).find('.r_div').toggle(); $('.r_div').addClass('subtog'); $(this).find('.r_div').removeClass('subtog'); }); $('.cat_2>li').hover(function(event) { $(this).find('.cat_3').addClass('slideRight'); $(this).siblings('li').find('.cat_3').removeClass('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;*/ } .r_div { display:none; width: 100px; transition: all .3s linear; } .cat_3.slideRight { visibility: visible; width: 100px; transition: all .3s linear; opacity: 1; display:block; } .subtog { display:none !important; } .cat_3 {visibility: hidden; opacity: 0;}
-
Menu #1
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
- submenu
- submenu
- submenu
- submenu
- submenu
- Test
-
Menu #2
- Test2
- Test2
- Test2
- Test2
- Test2
-
Menu #3
- Test3
- Test3
- Test3
- Test3
- Test3
-
Menu #4
- Test4
- Test4
- Test4
- Test4
- Test4
-
Menu #5
- Test5
- submenu
- submenu
- submenu
- submenu
- submenu
- Test5
- Test5
- Test5
- Test5
- Test5
Ответ 2
$('.category a').click(function(event) { $(this).toggleClass("active"); $(".category a").not($(this)).not($(this).parents("li>a")).removeClass("active"); $(".category ul").not($(this).parents("ul")).not($(this).next("ul")).removeClass("active"); $(this).next("ul").toggleClass("active"); }); .category>li ul { position: absolute; left: 100%; display: none; padding: 0px; top: 0px; } .category>li ul.active { display: block; } ul.category { width: auto; display: inline-block; } ul.category li, ul.category a { color: #000; text-decoration: none; } .category, .category ul { background: #a9a9a9; color: #000; } ul.category li { list-style: none; padding: 5px 10px; } ul.category ul { margin: 0px; padding: 0px; top: 0px; } .category { position: relative; } * { box-sizing: border-box; } ul.category, ul.category ul { border-right: 1px #fff solid; } ul.category { margin: 0px; padding: 0px; } .category a.active { color: red; }
- Menu #1
- Menu #2
Ответ 3
Скорее всего вы просто не вставили toggle $('.category>li').click(function(event) { $(this).toggle(function() { ваша анимация }); });
Ответ 4
А изобретение велосипеда обязательно? Нельзя использовать bootstrap? К примеру вот: $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); });
Multi-Level Dropdowns
In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).
Note that we have added jQuery to open the multi-level dropdown on click (see script section below).
Комментариев нет:
Отправить комментарий