CODEWITHSUNDEEP
javascriptjquery
Anurag Ranjan
Anurag Ranjan

Reputation: 169

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

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>

Upvotes: 0

Views: 67

Answers (2)

shivani
shivani

Reputation: 1028


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,

Upvotes: 2

Chintan Mathukiya
Chintan Mathukiya

Reputation: 393

<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

Upvotes: 0

Related Questions