facing problem in adding and removing class in ul and li tag

Question

I am working on a app using Jquery I want to add class and remove class conditionally. In code below there is menu and submenu.

If the user clicks #two or #three (to open submenu), the submenu class is added to the ul tag containing #two and #three and the menu class is removed.

If the user clicks #three or #four (on li tag), the menu class is added to the ul tag containing #three and #four and the submenu class is removed from the ul containing #one and #two

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    if (!$(".left_pannel ul li ul").hasClass('submenu')) {
      alert("test");
      $(".left_pannel ul li").removeClass("iconadd");
    } else {
      $(".left_pannel ul li").addClass("iconadd");
    }
  });
</script>

<body>
  <div class="left_pannel">
    <ul>
      <li><a href="#one" class="achore">Matches</a>
        <ul id="one" class="submenu" style="display: none;">
          <li><a href="https://www.google.com">Add Matches(m)</a></li>
          <li><a href="https://www.google.com">Add Cricket(m)</a></li>
        </ul>
      </li>
      <li><a href="#two" class="achore">Quize Master</a>
        <ul id="two" class="submenu" style="display: none;">
          <li><a href="">Add Matches(m)</a></li>
          <li><a href="">Add Cricket(m)</a></li>

        </ul>
      </li>
      <li id="#three"><a href="https://www.google.com">Excel Update</a></li>
      <li id="#four"><a href="#">Application version</a></li>
    </ul>
  </div>
</body>

You're running the code before the elements you're targeting exist. Use `$(document).ready(function () { ... });`. — Heretic Monkey, Jun 13 '19 at 13:04
@HereticMonkey thanks I have improved my code , but stuck with same issue — Anurag Ranjan, Jun 13 '19 at 13:06
Please pay attention to your console. With the code shown here, there are many syntax errors. You may want to read and follow some tutorials on jQuery and how it works. — Heretic Monkey, Jun 13 '19 at 13:08
You need to add a click event handler for the elements: http://api.jquery.com/click — Rory McCrossan, Jun 13 '19 at 13:10

score 2 · Answer 1 · answered Jun 13 '19 at 13:53

On click button find class that is subMenu , If class is there change class that is iconadd or not than remove iconadd

   $(document).ready(function()
   {
      $(".left_pannel ul li ul").on("click",function()
      {
        if ($(this).hasClass('submenu')) 
        {      
          $(".left_pannel ul li").addClass("iconadd");
        } 
        else 
        {
          $(".left_pannel ul li").removeClass("iconadd");
        }
      });
    });

Thanks,

score 0 · Answer 2 · answered Jun 13 '19 at 13:42

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $(".left_pannel ul li ul").click(function(){
        if ($(this).hasClass('submenu')) {      
          $(".left_pannel ul li").addClass("iconadd");
        } else {
          $(".left_pannel ul li").removeClass("iconadd");
        }
      });
    });
</script>

<body>
  <div class="left_pannel">
    <ul>
      <li><a href="#one" class="achore">Matches</a>
        <ul id="one" class="submenu" style="display: none;">
          <li><a href="https://www.google.com">Add Matches(m)</a></li>
          <li><a href="https://www.google.com">Add Cricket(m)</a></li>
        </ul>
      </li>
      <li><a href="#two" class="achore">Quize Master</a>
        <ul id="two" class="submenu" style="display: none;">
          <li><a href="">Add Matches(m)</a></li>
          <li><a href="">Add Cricket(m)</a></li>

        </ul>
      </li>
      <li id="#three"><a href="https://www.google.com">Excel Update</a></li>
      <li id="#four"><a href="#">Application version</a></li>
    </ul>
  </div>
</body>

try this code

facing problem in adding and removing class in ul and li tag

2 Answers2