Any reason pro removeClass() doesn’t work?

Asked

Viewed 37 times

0

You see, everything is working as expected, except removeClass at the end of the script. It simply refuses to remove the class. Something is wrong? 

$(document).ready(function() {
  var cheight = $(".categorias > ul").height();
  $(".categorias > ul").css("height", cheight);

  var formheight = $(".menulateral form").height();
  $(".subcategorias").css("top", -formheight)

  $(document).on('click', '.categorias > ul > li', function() {
    $(".menulateral form").addClass("ocultarform");
    $(this).children(".subcategorias").addClass('subcategoriasactive');
    var subheight = $(this).children(".subcategorias").height();
    $(".categorias > ul").css("height", subheight - formheight);
  });

  $(document).on('click', '.subtitle', function() {
    $(".subcategorias").removeClass("subcategoriasactive");
  });

});
.categorias {
  position: relative;
}

.categorias li {
  list-style: none;
}

.categorias a {
  color: #ccc;
  cursor: pointer;
}

.categorias ul>li>a {
  display: block;
  font-size: 19px;
  padding: 15px;
  border-bottom: 1px solid rgba(238, 238, 238, 0.05);
}

.categorias ul>li>a svg {
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.subcategorias {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: -100%;
  bottom: 0;
  background: #444;
  z-index: 5;
  border-radius: 0 0 5px 5px;
  display: inline-table;
  width: 100%;
}

.subcategoriasactive {
  right: 0;
}

.subcategorias .subtitle {
  background: #333;
}

.ocultarform {
  visibility: hidden;
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='categorias'>
  <ul>
    <li>
      <a>
        <span>CAMISETAS</span>
      </a>
      <ul class='subcategorias'>
        <li class='subtitle'>
          <a>
            <span>CAMISETAS</span>
          </a>
        </li>

        <li><a href="">FILMES</a></li>
        <li><a href="">SÉRIES</a></li>
        <li><a href="">MEMES</a></li>
        <li><a href="">FRASES</a></li>
      </ul>
    </li>

    <li>
      <a>
        <span>CANECAS</span>
      </a>
      <ul class='subcategorias'>
        <li><a href="">ALGUMA</a></li>
        <li><a href="">COISA</a></li>
        <li><a href="">MEMES</a></li>
        <li><a href="">FRASES</a></li>
      </ul>
    </li>

    <li style='position:relative;'>
      <a>
        <span style='margin-left:29px;'>CHINELOS</span>
      </a>
    </li>
  </ul>
</div>

javascript jquery

  • Apparently not. Can make a [mcve] demonstrating what you’re trying to do?

  • Look at the link. https://jsfiddle.net/14rt82no/1/

  • If you click on T-shirts in the first menu it will add the class to activate the submenu, and when you click on the first item of the submenu, which in turn is also "T-shirts", this is where removeClass() is fired. But nothing happens.

  • It does happen. The class is removed as it should, but this <li> is inside the first <li> T-shirts, which opens the menu; when you click on the internal, the click event is propagated by the parent elements (Bubbling) and ends up firing again the function that adds the class. As it runs very fast nor is noticeable this change visually.

  • Okay. I’m new at this, I’ll try to fix it. Thanks

1 answer

0

The removeClass is working properly. The problem is that after the Subtitle click event occurs, the other chic event with this '.categories > ul > li' selector is called again as it was also clicked, and ends up adding the class again.

Use the following script:

$(document).ready(function() {
  var cheight = $(".categorias > ul").height();
  $(".categorias > ul").css("height", cheight);

  var formheight = $(".menulateral form").height();
  $(".subcategorias").css("top", -formheight)

  $(document).on('click', '.categorias > ul > li', function() {
    $(".menulateral form").addClass("ocultarform");
    if(!$(".subcategorias").hasClass("subcategoriasactive"))
        $(this).children(".subcategorias").addClass('subcategoriasactive');
    else
        $(this).children(".subcategorias").removeClass('subcategoriasactive');
    var subheight = $(this).children(".subcategorias").height();
    $(".categorias > ul").css("height", subheight - formheight);
  });

});
.categorias {
  position: relative;
}

.categorias li {
  list-style: none;
}

.categorias a {
  color: #ccc;
  cursor: pointer;
}

.categorias ul>li>a {
  display: block;
  font-size: 19px;
  padding: 15px;
  border-bottom: 1px solid rgba(238, 238, 238, 0.05);
}

.categorias ul>li>a svg {
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.subcategorias {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: -100%;
  bottom: 0;
  background: #444;
  z-index: 5;
  border-radius: 0 0 5px 5px;
  display: inline-table;
  width: 100%;
}

.subcategoriasactive {
  right: 0;
}

.subcategorias .subtitle {
  background: #333;
}

.ocultarform {
  visibility: hidden;
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='categorias'>
  <ul>
    <li>
      <a>
        <span>CAMISETAS</span>
      </a>
      <ul class='subcategorias'>
        <li class='subtitle'>
          <a>
            <span>CAMISETAS</span>
          </a>
        </li>

        <li><a href="">FILMES</a></li>
        <li><a href="">SÉRIES</a></li>
        <li><a href="">MEMES</a></li>
        <li><a href="">FRASES</a></li>
      </ul>
    </li>

    <li>
      <a>
        <span>CANECAS</span>
      </a>
      <ul class='subcategorias'>
        <li><a href="">ALGUMA</a></li>
        <li><a href="">COISA</a></li>
        <li><a href="">MEMES</a></li>
        <li><a href="">FRASES</a></li>
      </ul>
    </li>

    <li style='position:relative;'>
      <a>
        <span style='margin-left:29px;'>CHINELOS</span>
      </a>
    </li>
  </ul>
</div>

  • Instead of making a if to add the class if it does not have, or remove otherwise, you can use the function toggleClass who already does it for you.

  • You’re absolutely right Anderson, thank you!

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.