Remove Class after Click

Asked

Viewed 72 times

2

I have a class #sidebar-show which, when I click on it, I want you to remove the class d-None to show the div below. I am using Bootstrap.

What happens is when I click on #sidebar-show the class d-None is not removed.

NOTE: I would like to remove the d-None of Nav

$("#sidebar-show").click(function() {
  $('#sidebar').removeClass("d-none");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-mobile d-block d-sm-none" id="sidebar-show">
  <i class="fas fa-bars"></i>
</div>
<nav class="d-none d-sm-block" id="sidebar">
  <div class="sidebar-header">
    <img src="logo-white.png" alt="">
  </div>
  <ul class="list-unstyled components">
    <li>
      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"><i class="fas fa-chart-line mr-2"></i> Métricas</a>
      <ul class="collapse list-unstyled" id="pageSubmenu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fas fa-cogs mr-2"></i>Configurações</a>
    </li>
  </ul>
</nav>

jquery

  • Here it worked perfectly. How did you verify that the class was not removed? You could elaborate a [mcve] by adding the class CSS code and correctly setting the "bars" button that receives the event (it is not visible in your example)?

4 answers

3

Your code works, I added a text to make sure where you are clicking and a style to demonstrate:

$("#sidebar-show").click(function() {
  $('#sidebar').removeClass("d-none");
});
#sidebar-show {
  cursor: pointer
}

.d-none {
  color: red;
  font-size: 1.3em;
  background-color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-mobile d-block d-sm-none" id="sidebar-show">
  <i class="fas fa-bars">oi, clique aqui</i>
</div>
<nav class="d-none d-sm-block" id="sidebar">
  <div class="sidebar-header">
    <img src="logo-white.png" alt="">
  </div>
  <ul class="list-unstyled components">
    <li>
      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"><i class="fas fa-chart-line mr-2"></i> Métricas</a>
      <ul class="collapse list-unstyled" id="pageSubmenu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fas fa-cogs mr-2"></i>Configurações</a>
    </li>
  </ul>
</nav>

3


Your problem most likely should be the order in which you are placing the scripts within your document. Also Booststrap uses the newer version of jQuery and not the older version you are using... (although even with this version will work)

Another observation, if you use the removeClass You’ll make the menu appear, but then how will you remove the menu? I believe your intention is to show and hide the menu, so in this case the ideal would be to use the toggleClass

See the example with your code, the only thing I did was put toggleClass on JS and use the correct document build order.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<style>
  
</style>
</head>
<body>
  
  <div class="sidebar-mobile d-block d-sm-none" id="sidebar-show">
    <i class="fas fa-bars"></i>
  </div>
  <nav class="d-none d-sm-block" id="sidebar">
    <div class="sidebar-header">
      <img src="logo-white.png" alt="">
    </div>
    <ul class="list-unstyled components">
      <li>
        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"><i class="fas fa-chart-line mr-2"></i> Métricas</a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
        </ul>
      </li>
      <li>
        <a href="#"><i class="fas fa-cogs mr-2"></i>Configurações</a>
      </li>
    </ul>
  </nav>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

  <script>
  $("#sidebar-show").click(function() {
    $('#sidebar').toggleClass("d-none");
  });
  </script>
</body>
</html>

  • The problem was the call order.

  • @Felipegoulart thought it might be this... Note that here is the structure that Bootstrao indicates, https://getbootstrap.com/docs/4.0/getting-started/introduction/#Starter-template and any other script your custom should come after all other src script indexes

  • So in this case, ideally I call the custom.js folder after all?

  • 1

    @Felipegoulart this even your custom.js must be the last one on the index list, because for it to run correctly it may depend on others. js as in your jQuery case

1

try with 

$("#sidebar-show").on('click',function(){
  $('#sidebar').removeClass("d-none");
});

  • It didn’t work that way either.

  • performing some tests here, in my html your code worked perfectly

  • I edited the question with an OBS. Now I think you can understand better.

  • Buddy, from what I’ve seen here, when you click, it fades, fadeDown

1

hello your code is right, the problem is that you should be clicking in a place where you do not catch the event, try to change the div

class="sidebar-mobile d-block d-Sm-None" id="sidebar-show" style=" background: red; padding-top: 11px; "> "

just for you to take a test.

Browser other questions tagged jquery

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