#javascript #html #jquery #css #submenu
Вопрос:
Я использую этот код: я помещаю html,css,jquery, когда я нажимаю на li, я хочу открыть его подменю, но открываются все подменю, и я хочу открыть подменю специально для каждого элемента. Кто-нибудь может мне с этим помочь?
$(document).ready(function () { $(".menuitem li").click(function(){ $('.submenu').slideToggle(); }); }); ul.submenu { position: relative; } .menuitem li{ position: relative; } .submenu li{ position: relative; } lt;div class="mobileMenu"gt; lt;ul class="menuitem"gt; lt;li gt;lt;a href=" " gt;آموزش lt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li gt;lt;a href=" " gt;پژوهشlt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li gt;lt;a href=" " gt;معاونت هاlt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; Ответ №1:
В своем коде jQuery вы не указали, чтобы открывать одно подменю. Поэтому он откроет все подменю.
$(function() { $('.menuitem li').click(function(e) { e.stopPropagation(); var $el = $('ul',this); $('.menuitem gt; li gt; ul').not($el).slideUp(); $el.stop(true, true).slideToggle(400); }); }); ul.submenu { position: relative; } .menuitem li { position: relative; } .submenu li { position: relative; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="mobileMenu"gt; lt;ul class="menuitem"gt; lt;ligt; lt;a href=" "gt;آموزش lt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;ligt; lt;a href=" "gt;پژوهشlt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;ligt; lt;a href=" "gt;معاونت هاlt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;/ulgt; lt;/divgt; Комментарии:
1. спасибо, но это не работает
2. @BaharSlms вы хотите нажать открыть его подменю, верно? и вот фрагмент кода, из которого мы ясно видим, что при нажатии li открывается только подменю, а не все меню.
Ответ №2:
по щелчку мыши вы должны получить дочерний элемент меню, а затем скользнуть по нему. Замените свой код jquery следующим
$(".menuitem li").click(function(){ $(this).children().find('li').slideToggle(); }); lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt; lt;scriptgt; $(document).ready(function () { $(".menuitem li").click(function(){ $(this).children().find('li').slideToggle(); }); }); lt;/scriptgt; lt;stylegt; ul.submenu { position: relative; } .menuitem li{ position: relative; } .submenu li{ position: relative; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="mobileMenu"gt; lt;ul class="menuitem"gt; lt;li gt;lt;a href=" " gt;آموزش lt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li gt;lt;a href=" " gt;پژوهشlt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li gt;lt;a href=" " gt;معاونت هاlt;/agt; lt;i class="fa fa-caret-down" aria-hidden="true"gt;lt;/igt; lt;ul class="submenu"gt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;ligt;lt;a href=" " target="_blank"gt;زیر منوlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. да, спасибо, я пытался использовать его, но он не работает
2. с какой проблемой вы столкнулись, когда я проверяю, что она работает идеально.
3. когда я добавляю этот код в свой jQuery, подменю вообще не открываются
4. вы должны заменить свой $(«.menuitem li»).нажмите(функция(){ $(‘.подменю’).слайд-шоу(); }); этот код на $( «. menuitem li»).нажмите(функция(){ $(это).дети().найдите(‘li’). slideToggle(); }); тогда это сработает, вы должны что-то сделать не так.