1

Estou tendo um problema com o exemplo abaixo. Vários dropdowns em jquery numa mesma página, todos eles abrem perfeitamente, mas todos ficam abertos, mesmo quando clicado em outro dropdown, queria que apenas um dropdown ficasse aberto, e que quando clicado em outro, o mesmo fechasse. E também que ele não feche quando clicado com o botão direito dentro dele.

$(document).on('click',".dropbtn",function(){
  $(this).next(".dropdown-content").toggle( "show" );
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    $(".dropdown-content").hide(100);
  }
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
  
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

2
  • "Botão direito" rsrs
    – Sam
    Commented 26/01/2018 às 0:14
  • @dvd editado... rsrsrs Commented 26/01/2018 às 0:29

2 Respostas 2

2

O uso do .hide() causa conflito. Porque quando o elemento recebe um .hide(), a classe .show não fará efeito, porque ao usar .hide() o elemento recebe um style inline que tem mais força que uma classe no CSS.

O correto seria criar uma outra classe oposta ao .show, que nomeei .hide.

Coloquei 2 códigos: em JS puro (comentado) e em jQuery:

$(document).on('click',".dropbtn",function(){
  $(".dropdown-content").not($(this).next(".dropdown-content")).removeClass("show");
  $(this).next(".dropdown-content").toggleClass("show");  
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    $(".dropdown-content").removeClass("show");
  }
}

//var drop = document.querySelectorAll(".dropdown-content");
//for(var x=0; x<drop.length; x++){
//   drop[x].oncontextmenu = function(event) {
//      console.log(this.innerHTML);
//      this.classList.add("show");
//   }
//}

$(".dropdown-content").on("contextmenu", function(){
   $(this).addClass("show");
});
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" class="dropdown-content">
    <a href="#home">Home1</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" class="dropdown-content">
    <a href="#home">Home2</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#home">Home3</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
  
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" class="dropdown-content">
    <a href="#home">Home4</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

2
  • Perfeito como sempre, valeu! Commented 26/01/2018 às 13:36
  • editei seu exemplo ai, coloquei um form no dropdown, queria que o quando clicado no dropdown com tivesse um input, ele já estivesse com focus, e que o dropdown não feche quando clicar dentro do input. Eu tentei faze-lo com com "$('.search-input').focus();" dentro do evento click, funciona mais ou menos, o focus entra em ação apenas quando está fechando. Commented 26/01/2018 às 14:34
1

Segue:

$(document).on('click',".dropbtn",function(){
  $(".dropdown-content").hide(100);
  $(this).next(".dropdown-content").toggle();  
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    $(".dropdown-content").hide(100);
  }
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
  
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

7
  • isso, mas o dropdown aberto não fecha quando clicado nele mesmo... e tem ainda a questão do contextmenu, para que o toggle não tenha efeito quando clicado como botão direito no link dentro do dropdown. Commented 26/01/2018 às 1:16
  • Ahhh, agora eu entendi Commented 26/01/2018 às 1:17
  • Só a parte do botão direito que eu não saquei o que você espera e qual o motivo. Commented 26/01/2018 às 1:24
  • sabe esse menu dropdown de notificações do StackOverflow? Se você clica com o botão direito para abrir uma notificação em uma nova aba, ele não fecha, é desse estilo que eu queria. Commented 26/01/2018 às 1:26
  • Numa outra pergunta que fiz, sobre menu semelhante, só em em javascript puro, o camarada @dvd apresentou uma boa solução, mas como eu precisava usar vários dropdowns numa mesma pagina, eu fiz essa outra pergunta com esse dropdown em jquery. pt.stackoverflow.com/questions/271898/… Commented 26/01/2018 às 1:38

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 .