How to stop toggleclass on parent when child li gets pressed?
This is my HTML:
<ul id="menu-mobile" class="menu menu-sliding">
<li>
<a href="javascript:void(0);">Home</a></span>
</li>
<li class="has-children">
<a href="javascript:void(0);">IT Solutions</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li class="has-children">
<a href="javascript:void(0);">IT Services</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Managed IT</a></li>
<li><a href="javascript:void(0);">IT Support</a></li>
<li><a href="javascript:void(0);">IT Consultancy</a></li>
<li><a href="javascript:void(0);">Cloud Computing</a></li>
<li><a href="javascript:void(0);">Cyber Security</a></li>
<li><a href="javascript:void(0);">Custom Software</a></li>
</ul>
</li>
<li class="has-children">
<a href="">Industries</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Banking</a></li>
<li><a href="javascript:void(0);">Capital Markets</a></li>
<li><a href="javascript:void(0);">Enterprise Technology</a></li>
<li><a href="javascript:void(0);">Manufacturing</a></li>
<li><a href="javascript:void(0);">Healthcare</a></li>
<li><a href="javascript:void(0);">Higher Education</a></li>
<li><a href="javascript:void(0);">Logistics</a></li>
</ul>
</li>
</ul>
</li>
</ul>
This is my script:
$('ul.menu li.has-children').on('click', function ()
$(this).toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
This is how it looks:
Now the problem is whenever I am clicking the nested li
's i.e. It Services / Industries
.menu-expand
class gets removed from the parent i.e. It Solutions
and the whole block goes in display:none
state.
How to fix this?
jquery javascript-events nested next siblings
add a comment |
This is my HTML:
<ul id="menu-mobile" class="menu menu-sliding">
<li>
<a href="javascript:void(0);">Home</a></span>
</li>
<li class="has-children">
<a href="javascript:void(0);">IT Solutions</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li class="has-children">
<a href="javascript:void(0);">IT Services</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Managed IT</a></li>
<li><a href="javascript:void(0);">IT Support</a></li>
<li><a href="javascript:void(0);">IT Consultancy</a></li>
<li><a href="javascript:void(0);">Cloud Computing</a></li>
<li><a href="javascript:void(0);">Cyber Security</a></li>
<li><a href="javascript:void(0);">Custom Software</a></li>
</ul>
</li>
<li class="has-children">
<a href="">Industries</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Banking</a></li>
<li><a href="javascript:void(0);">Capital Markets</a></li>
<li><a href="javascript:void(0);">Enterprise Technology</a></li>
<li><a href="javascript:void(0);">Manufacturing</a></li>
<li><a href="javascript:void(0);">Healthcare</a></li>
<li><a href="javascript:void(0);">Higher Education</a></li>
<li><a href="javascript:void(0);">Logistics</a></li>
</ul>
</li>
</ul>
</li>
</ul>
This is my script:
$('ul.menu li.has-children').on('click', function ()
$(this).toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
This is how it looks:
Now the problem is whenever I am clicking the nested li
's i.e. It Services / Industries
.menu-expand
class gets removed from the parent i.e. It Solutions
and the whole block goes in display:none
state.
How to fix this?
jquery javascript-events nested next siblings
add a comment |
This is my HTML:
<ul id="menu-mobile" class="menu menu-sliding">
<li>
<a href="javascript:void(0);">Home</a></span>
</li>
<li class="has-children">
<a href="javascript:void(0);">IT Solutions</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li class="has-children">
<a href="javascript:void(0);">IT Services</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Managed IT</a></li>
<li><a href="javascript:void(0);">IT Support</a></li>
<li><a href="javascript:void(0);">IT Consultancy</a></li>
<li><a href="javascript:void(0);">Cloud Computing</a></li>
<li><a href="javascript:void(0);">Cyber Security</a></li>
<li><a href="javascript:void(0);">Custom Software</a></li>
</ul>
</li>
<li class="has-children">
<a href="">Industries</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Banking</a></li>
<li><a href="javascript:void(0);">Capital Markets</a></li>
<li><a href="javascript:void(0);">Enterprise Technology</a></li>
<li><a href="javascript:void(0);">Manufacturing</a></li>
<li><a href="javascript:void(0);">Healthcare</a></li>
<li><a href="javascript:void(0);">Higher Education</a></li>
<li><a href="javascript:void(0);">Logistics</a></li>
</ul>
</li>
</ul>
</li>
</ul>
This is my script:
$('ul.menu li.has-children').on('click', function ()
$(this).toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
This is how it looks:
Now the problem is whenever I am clicking the nested li
's i.e. It Services / Industries
.menu-expand
class gets removed from the parent i.e. It Solutions
and the whole block goes in display:none
state.
How to fix this?
jquery javascript-events nested next siblings
This is my HTML:
<ul id="menu-mobile" class="menu menu-sliding">
<li>
<a href="javascript:void(0);">Home</a></span>
</li>
<li class="has-children">
<a href="javascript:void(0);">IT Solutions</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li class="has-children">
<a href="javascript:void(0);">IT Services</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Managed IT</a></li>
<li><a href="javascript:void(0);">IT Support</a></li>
<li><a href="javascript:void(0);">IT Consultancy</a></li>
<li><a href="javascript:void(0);">Cloud Computing</a></li>
<li><a href="javascript:void(0);">Cyber Security</a></li>
<li><a href="javascript:void(0);">Custom Software</a></li>
</ul>
</li>
<li class="has-children">
<a href="">Industries</a>
<span class="menu-item-toggle"><span></span></span>
<ul class="sub-menu">
<li><a href="javascript:void(0);">Banking</a></li>
<li><a href="javascript:void(0);">Capital Markets</a></li>
<li><a href="javascript:void(0);">Enterprise Technology</a></li>
<li><a href="javascript:void(0);">Manufacturing</a></li>
<li><a href="javascript:void(0);">Healthcare</a></li>
<li><a href="javascript:void(0);">Higher Education</a></li>
<li><a href="javascript:void(0);">Logistics</a></li>
</ul>
</li>
</ul>
</li>
</ul>
This is my script:
$('ul.menu li.has-children').on('click', function ()
$(this).toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
This is how it looks:
Now the problem is whenever I am clicking the nested li
's i.e. It Services / Industries
.menu-expand
class gets removed from the parent i.e. It Solutions
and the whole block goes in display:none
state.
How to fix this?
jquery javascript-events nested next siblings
jquery javascript-events nested next siblings
edited Nov 11 at 15:49
Mohammad
15.3k113261
15.3k113261
asked Nov 11 at 15:41
Sayantan Chandra
287
287
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I guess you can change the key to use it properly and cover it only for first level li's like this:
$('ul.menu li.has-children a').on('click', function ()
$(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
To work it out properly, the click event is transferred to the A tag and accordingly inner body of block.
Hope this helps.
Did not work... still gets removed from parent
– Sayantan Chandra
Nov 11 at 16:07
Can you provide css with this, I want to see why its not working.
– Daksh Mehta
Nov 11 at 16:14
That'll be difficul,its pretty messy as i'm writing it on sass. The concept is when ".menu-expand" gets added to li child ul.submenu gets "display: block".
– Sayantan Chandra
Nov 11 at 16:19
I think I got the issue. Its in the click event. As the whole ul li is inside that block only. I suggest use the code I created for you at codepen.io/anon/pen/oQzqxg
– Daksh Mehta
Nov 11 at 16:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53250346%2fhow-to-stop-toggleclass-on-parent-when-child-li-gets-pressed%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I guess you can change the key to use it properly and cover it only for first level li's like this:
$('ul.menu li.has-children a').on('click', function ()
$(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
To work it out properly, the click event is transferred to the A tag and accordingly inner body of block.
Hope this helps.
Did not work... still gets removed from parent
– Sayantan Chandra
Nov 11 at 16:07
Can you provide css with this, I want to see why its not working.
– Daksh Mehta
Nov 11 at 16:14
That'll be difficul,its pretty messy as i'm writing it on sass. The concept is when ".menu-expand" gets added to li child ul.submenu gets "display: block".
– Sayantan Chandra
Nov 11 at 16:19
I think I got the issue. Its in the click event. As the whole ul li is inside that block only. I suggest use the code I created for you at codepen.io/anon/pen/oQzqxg
– Daksh Mehta
Nov 11 at 16:41
add a comment |
I guess you can change the key to use it properly and cover it only for first level li's like this:
$('ul.menu li.has-children a').on('click', function ()
$(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
To work it out properly, the click event is transferred to the A tag and accordingly inner body of block.
Hope this helps.
Did not work... still gets removed from parent
– Sayantan Chandra
Nov 11 at 16:07
Can you provide css with this, I want to see why its not working.
– Daksh Mehta
Nov 11 at 16:14
That'll be difficul,its pretty messy as i'm writing it on sass. The concept is when ".menu-expand" gets added to li child ul.submenu gets "display: block".
– Sayantan Chandra
Nov 11 at 16:19
I think I got the issue. Its in the click event. As the whole ul li is inside that block only. I suggest use the code I created for you at codepen.io/anon/pen/oQzqxg
– Daksh Mehta
Nov 11 at 16:41
add a comment |
I guess you can change the key to use it properly and cover it only for first level li's like this:
$('ul.menu li.has-children a').on('click', function ()
$(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
To work it out properly, the click event is transferred to the A tag and accordingly inner body of block.
Hope this helps.
I guess you can change the key to use it properly and cover it only for first level li's like this:
$('ul.menu li.has-children a').on('click', function ()
$(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
);
To work it out properly, the click event is transferred to the A tag and accordingly inner body of block.
Hope this helps.
edited Nov 12 at 10:20
Mohammad
15.3k113261
15.3k113261
answered Nov 11 at 15:54
Daksh Mehta
9918
9918
Did not work... still gets removed from parent
– Sayantan Chandra
Nov 11 at 16:07
Can you provide css with this, I want to see why its not working.
– Daksh Mehta
Nov 11 at 16:14
That'll be difficul,its pretty messy as i'm writing it on sass. The concept is when ".menu-expand" gets added to li child ul.submenu gets "display: block".
– Sayantan Chandra
Nov 11 at 16:19
I think I got the issue. Its in the click event. As the whole ul li is inside that block only. I suggest use the code I created for you at codepen.io/anon/pen/oQzqxg
– Daksh Mehta
Nov 11 at 16:41
add a comment |
Did not work... still gets removed from parent
– Sayantan Chandra
Nov 11 at 16:07
Can you provide css with this, I want to see why its not working.
– Daksh Mehta
Nov 11 at 16:14
That'll be difficul,its pretty messy as i'm writing it on sass. The concept is when ".menu-expand" gets added to li child ul.submenu gets "display: block".
– Sayantan Chandra
Nov 11 at 16:19
I think I got the issue. Its in the click event. As the whole ul li is inside that block only. I suggest use the code I created for you at codepen.io/anon/pen/oQzqxg
– Daksh Mehta
Nov 11 at 16:41
Did not work... still gets removed from parent
– Sayantan Chandra
Nov 11 at 16:07
Did not work... still gets removed from parent
– Sayantan Chandra
Nov 11 at 16:07
Can you provide css with this, I want to see why its not working.
– Daksh Mehta
Nov 11 at 16:14
Can you provide css with this, I want to see why its not working.
– Daksh Mehta
Nov 11 at 16:14
That'll be difficul,its pretty messy as i'm writing it on sass. The concept is when ".menu-expand" gets added to li child ul.submenu gets "display: block".
– Sayantan Chandra
Nov 11 at 16:19
That'll be difficul,its pretty messy as i'm writing it on sass. The concept is when ".menu-expand" gets added to li child ul.submenu gets "display: block".
– Sayantan Chandra
Nov 11 at 16:19
I think I got the issue. Its in the click event. As the whole ul li is inside that block only. I suggest use the code I created for you at codepen.io/anon/pen/oQzqxg
– Daksh Mehta
Nov 11 at 16:41
I think I got the issue. Its in the click event. As the whole ul li is inside that block only. I suggest use the code I created for you at codepen.io/anon/pen/oQzqxg
– Daksh Mehta
Nov 11 at 16:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53250346%2fhow-to-stop-toggleclass-on-parent-when-child-li-gets-pressed%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown