I have the toggle in my menu, within which I have two links. I, because the top link is another toggleed link Include, there is no problem in it. But since the link above reveals the link above it, a user can click on it and now two toploid items are open and stacked at the top of each other is there a way to check this That other toggled items are open and if so, turn it off? Thanks!
& lt; Div class = "mother-toggle" & gt; & Lt; A href = "#" id = "custom-toggle" & gt; Customize & lt; / A & gt; & Lt; Br / & gt; & Lt; Div class = "hide menu-toggle" id = "custom-menu" & gt; & Lt; Div class = "menu-toggle-one" & gt; & Lt; H3 & gt; Background & lt; / H3 & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Dark wood & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Wallpaper & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Bricks & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Plax & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Default & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "menu-toggle-two" & gt; & Lt; H3 & gt; Layout & lt; / H3 & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Grid & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; List & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Full & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; A href = "/ submit /" & gt; Submit Video & lt; / A & gt; & Lt; Br / & gt; & Lt; Div class = "guardian-toggle" & gt; & Lt; A href = "#" id = "channel-toggle" & gt; Channel & lt; / A & gt; & Lt; Div class = "hide menu-toggle" id = "channels-menu" & gt; & Lt; Div class = "menu-toggle-one" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Automotive & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Comedy & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Film & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Weather & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "menu-toggle-two" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Business & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Commercial & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Music & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Technology & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Script & gt; $ ("#customize-toggle") Click (function () {$ ("# custom-menu"). Toggle ();}); $ ("# Channel-toggle"). Click (function () {$ ("# channel-menu"). Toggle ();}); & Lt; / Script & gt;
You can adjust your jQuery slightly, because you already have . Forward, if you want, because there is a consistent layout in your menu, you can have a click handler which is not necessary to match IDs, relative to toggle devil link, such as: < / P> Menu - toggle on all toggle menu class, to hide just what you want in your click handler, like this:
$ ("#customized- Toggle ") .click (function () {$ (" Menu-toggle: not (# custom-menu) ") Hide (); $ (" # custom-menu ") Toggle ();}); Click on $ ("#Channel-Toggle") (function () {$ ("Menu-toggle: not (# channels-menu)") Hide (); $ ("# channels-menu") Toggle ();});
$ ("parent-toggle" a) Click (function () ($ ("div.menu- toggle") no ($ (this). Siphoning ()). Skip (); $ (this) .Syling ("menu-toggle") Toggle ();}); And finally, if you want a little animation, you can easily add it and like this: < Code> $ ("parent-toggle";) Click (function () ($ ("div.menu-toggle"). ($ (This) .siblings ()). SlideUp (); $ (this) .siblings ("Menu- Toggle") Slide Toggle ();});
Comments
Post a Comment