Как открыть выпадающую кнопку, нажав на текст? - PullRequest
Новая
       2

Как открыть выпадающую кнопку, нажав на текст?

0 голосов
/ 11 апреля 2019

Я устанавливаю кнопку раскрывающегося меню на моем веб-сайте, но я получаю эту странную вещь. Раскрывающаяся часть отображается только тогда, когда я нажимаю на поле кнопки, но не когда я нажимаю «Инструменты». Что я делаю неправильно? Большое спасибо!

(Хорошо, школа W3 не примет код для сохранения, поэтому я должен сделать это вручную) 

    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    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');
          }
        }
      }
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    button.dropbtn{
      background:none;
      border:none;
      padding:0;
    }
    .dropdown a:hover {background-color: #ddd;}
    .show {display: block;}
    <body>
    <div class="column-outlet">
      <button onclick="myFunction()" class="dropbtn"><strong>Tools</strong></button>
      <div id="myDropdown" class="dropdown-content">
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
      </div>
    </div>

Ответы [ 2 ]

2 голосов
/ 11 апреля 2019

Снимите сильную метку с кнопки. 

<body>
<div class="column-outlet">
  <button onclick="myFunction()" class="dropbtn">Tools</button>
  <div id="myDropdown" class="dropdown-content">
    <li class="force-css"><a href="#">Blok 1</a></li>
    <li class="force-css"><a href="#">Blok 1</a></li>
    <li class="force-css"><a href="#">Blok 1</a></li>
  </div>
</div>
</body>
0 голосов
/ 11 апреля 2019

Не используйте тег для кнопки, но используйте текстовый вес в CSS и используйте тег UL для создания списка 

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    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');
          }
        }
      }
    }
.dropdown {
      position: relative;
      display: inline-block;
     
    }
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    button.dropbtn{
     font-weight: 700;
      background:none;
      border:none;
      padding:0;
    }
    .dropdown a:hover {background-color: #ddd;}
    .show {display: block;}
<body>
    <div class="column-outlet">
      <button onclick="myFunction()" class="dropbtn">Tools</button>
      <ul id="myDropdown" class="dropdown-content">
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
      </ul>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...