HTML - Buttom separation

Question

HTML - Buttom separation

Navigation

#1 by (0 votes)

-1

I made the following HTML:

<p>
    <html>
        <head>
        </head>
        <body>

    <!-- Menu com Submenu -->        
<div class="dropdown">
<link rel="stylesheet" type="text/css" href="\Dropdown.css">
<script type="text/javascript" src="dropdown-content.js"></script>

  <button onclick="myFunction()" class="dropbtn">teste</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Treinamento 1</a>
    <a href="#">Treinamento 2</a>
    <a href="#">Treinamento 3</a>

    </body>
    </html>
</p>

JS:

/* Quando o usuário clica no botão,
alternar entre ocultar e mostrar o conteúdo suspenso */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Fechar o menu suspenso se o usuário clicar fora dele
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

CSS:

/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 9px 60px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 150px;
    box-shadow: 0px 15px 05px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 8px 8px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

I just wanted several buttons with the same functionality, one below the other, and if I add another one, the submenu opens on the first button, how do I separate a button from one another, it's the id who defines who's who?

there according to our friend's response, I did so: did not work:

<div class="dropdown">
<link rel="stylesheet" type="text/css" href="\10.1.12.10\fabricas\Misael\Rodrigo_Ramos\Toodle\MenuTreinamento\Dropdown.css">
<script type="text/javascript" src="\10.1.12.10\fabricas\Misael\Rodrigo_Ramos\Toodle\MenuTreinamento\dropdown-content.js"></script>

<button onclick="myFunction()" class="dropbtn">teste1</button><br>
<div id="myDropdown" class="dropdown-content">
<a href="#">Teste</a>
<a href="#">Treinamento 2</a>

<button onclick="myFunction()" class="dropbtn">teste2</button><br>
<div id="teste" class="dropdown-content">
<a href="#">Teste</a>

but it did not work

javascript html css

asked by anonymous 26.07.2018 / 15:44

1 answer

I want to import a whole page with jquery, should I split the page into different jquerys so that I can later write code by jquery means? Edit screen does not load the data on the screen

score 0 · Answer 1

Well, I've done an example with jQuery just so you have an idea of how you'll do it. I commented jQuery for better understanding.

Logic used

When you click the button, it stores in a variable the instance button. Example: There are 3 buttons in html. When you click first , it stores 1 in the variable. By clicking second , it stores 2 . And so it goes

The element with class dropdown-content of the same instance gets (from it is removed) class show

$(".dropbtn").each(function() { // para cada elemento com a classe dropbtn
  $(this).on("click", function(event) { // quando clicado
    event.stopPropagation(); // previne a ativação de outro click
    var j = $(".dropbtn").index(this); // pega qual a ocorrencia do elemento
    $(".dropdown-content").eq(j).toggleClass("show"); // poe ou tira a classe show de acordo com a ocorrencia do elemento
  });
});

// fechar o dropdown quando clicado em qualquer outro elemento
$(window).click(function() {
  $(".dropdown-content").each(function() {
    $(this).toggleClass("show");
  });
});

/* Dropdown Button */

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 9px 60px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}


/* The container <div> - needed to position the dropdown content */

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


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  box-shadow: 0px 15px 05px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

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


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dropdown">
  <button class="dropbtn">teste1</button><br>
  <div class="dropdown-content">
    <a href="#">Teste</a>
    <a href="#">Treinamento 1</a>
    <button class="dropbtn">teste2</button>
    <div class="dropdown-content">
      <a href="#">Teste2</a>
      <a href="#">Treinamento2</a>
      <button class="dropbtn">teste3</button>
      <div class="dropdown-content">
        <a href="#">Teste</a>
      </div>
    </div>

  </div>