How to stop toggleclass on parent when child li gets pressed?










0














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:



enter image description here



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?










share|improve this question




























    0














    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:



    enter image description here



    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?










    share|improve this question


























      0












      0








      0







      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:



      enter image description here



      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?










      share|improve this question















      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:



      enter image description here



      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 11 at 15:49









      Mohammad

      15.3k113261




      15.3k113261










      asked Nov 11 at 15:41









      Sayantan Chandra

      287




      287






















          1 Answer
          1






          active

          oldest

          votes


















          0














          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.






          share|improve this answer






















          • 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










          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
          );



          );













          draft saved

          draft discarded


















          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









          0














          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.






          share|improve this answer






















          • 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















          0














          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.






          share|improve this answer






















          • 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













          0












          0








          0






          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.






          share|improve this answer














          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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
















          • 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

















          draft saved

          draft discarded
















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Use pre created SQLite database for Android project in kotlin

          Darth Vader #20

          Ondo