Remove class after click

Navigation
2
I have a class # sidebar-show that when I click on it, I want you to remove the d-none class to appear in the div below. I'm using Bootstrap.

What happens, is that when I click # sidebar-show the d-none class is not removed.

NOTE: I would like to remove the d-none 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><divclass="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>
    
asked by anonymous 03.09.2018 / 16:50

4 answers

3

Your problem most likely should be the order as you are placing the scripts inside your document. In addition, Booststrap uses the newer version of jQuery and not this older version that you are using ... (although even with this version it will work)

Another note, if you use removeClass you will 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 it would be ideal to use toggleClass

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

<!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><scriptsrc="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><scriptsrc="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>
    
03.09.2018 / 17:16
3

Your code works, I've added text so you're sure where you're 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><divclass="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>
    
03.09.2018 / 17:07
1

try with 

$("#sidebar-show").on('click',function(){
  $('#sidebar').removeClass("d-none");
});
    
03.09.2018 / 16:52
1

Hello, your code is right, the problem is that you should be clicking on a place where you do not get the event, try changing the div

03.09.2018 / 17:03
How does a forloop generate random values, then "append" the next set of generated values? Is there performance gain using .replace () instead of .put () in a Map?