2

Tenho uma classe #sidebar-show que, quando eu clico nele, quero que remova a classe d-none para aparecer a div abaixo. Estou utilizando Bootstrap.

O que acontece, é que quando eu clico em #sidebar-show a classe d-none não é removida.

OBS: Eu gostaria de remover o d-none do 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>

1
  • Aqui funcionou perfeitamente. Como verificou que a classe não foi removida? Poderia elaborar um Exemplo Mínimo, Completo e Verificável adicionando o código CSS da classe e definindo corretamente o botão "bars" que recebe o evento (ele não está visível no seu exemplo)?
    – Woss
    3/09/2018 às 15:06

4 Respostas 4

3

Seu problema muito provavelmente deve ser a ordem como vc está colocando os scripts dentro do seu documento. Além disso o Booststrap usa a versão mais nova do jQuery e não essa versão mais antiga que vc está usando... (apesar de que mesmo com essa versão vai funcionar)

Outra observação, se vc usar o removeClass vc vai fazer o menu aparecer, mas depois como vc vai fazer para remover o menu? Acredito que a sua intenção seja mostrar e esconder o menu, então nesse caso o ideal seria usar o toggleClass

Veja o exemplo com o seu código, a única coisa que fiz foi colocar toggleClass no JS e usar a ordem correta de construção do documento.

<!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>

4
  • O problema era a ordem de chamada. 3/09/2018 às 17:02
  • @FelipeGoulart imaginei que podia ser isso... Olha que aqui tem a estrutura que o Bootstrao indica, getbootstrap.com/docs/4.0/getting-started/introduction/… e qualquer outro script seu personalizado deve vir apos todas as outras indexações de script src
    – hugocsl
    3/09/2018 às 17:14
  • Então nesse caso, o ideal é eu chamar a pasta custom.js depois de tudo? 3/09/2018 às 17:14
  • 1
    @FelipeGoulart isso mesmo o seu custom.js deve ser o último da lista de indexação, pois para ele executar corretamente pode depender de outras .js como por exemplo no seu caso do jQuery
    – hugocsl
    3/09/2018 às 17:16
2

Seu código funciona, adicionei um texto para que tenha certeza de onde está clicando e um estilo para demonstrar:

$("#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>

1

tente com

$("#sidebar-show").on('click',function(){
  $('#sidebar').removeClass("d-none");
});
4
  • Não funcionou dessa forma também. 3/09/2018 às 14:54
  • realizando alguns testes aqui, no meu html seu código funcionou perfeitamente 3/09/2018 às 14:57
  • Editei a pergunta com um OBS. Agora acho que você consegue entender melhor. 3/09/2018 às 15:01
  • Amigo, pelo que vi aqui, quando clica, ele faz efeito fadeIn, fadeDown 3/09/2018 às 15:02
1

olá o seu código está certo, o problema é que você deve está clicando em um lugar onde não pega o evento, tenta trocar a div

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

só para você fazer um teste.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .