点击按钮不响应当点击文本

我做了一个导航栏，点击两次按钮。当你点击文本和/或5px左右（填充为5px）时，其中一个响应非常好，但另一个只在5px左右单击时才响应，而不是在文本上。他们有相同的代码，但我是新来的JS，所以也许我做了错误的事情（只是复制代码，并在第二个代码后面加上'2'）。任何人都可以帮助我，让点击发生在文本上而不是周围。此外，点击它时会出现蓝色边框。我将边界设置为：没有但似乎不是。谢谢！点击按钮不响应当点击文本

<div class="col-12 navbar-0"> 
<div class="col-10 col-container col-center-block navbar-1"> 

<div class="colom col-3 home"><strong><a href="index.php">HOME</a></strong></div> 

<div class="colom col-3 dropdown aanbod"> 
    <button onclick="myFunction()" class="dropbtn"><strong>ONS AANBOD</strong></button> 
    <div id="myDropdown" class="dropdown-content col-12"> 
    <a href="index.php?option=com_content&view=article&id=2">WebDesign</a> 
    <a href="index.php?option=com_content&view=article&id=6">Retoucheren</a> 
    </div> 
</div> 

<div class="colom col-3 dropdown2 portfolio"> 
    <button onclick="myFunction2()" class="dropbtn2"><strong>PORTFOLIO</strong></button> 
    <div id="myDropdown2" class="dropdown-content2 col-12"> 
    <a href="index.php?option=com_content&view=article&id=4">Websites</a> 
    <a href="index.php?option=com_content&view=article&id=7">Retoucheringen</a> 
    </div> 
</div> 

    <div class="colom col-3 contact"><strong><a href="index.php?option=com_content&view=article&id=8">CONTACT</a></strong></div> 

    </div> 
</div> 

<style> 
/* Navigation */ 
.navbar-0 { 
    height: auto; 
} 
.navbar-1 { 
    text-align: center; 
    color: #FB4D4D; 
    padding: 0px; 
} 

    .home, .contact { 
    padding:5px; 
    } 

/* Dropdown Button */ 
.dropbtn { 
text-align: center; 
    font-size: 15px; 
    font-family: 'Open Sans', sans-serif; 
background-color: white; 
    color: #FB4D4D; 
    padding: 5px; 
    border: none; 
    cursor: pointer; 
} 
/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
} 
/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: white; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 
/* Links inside the dropdown */ 
.dropdown-content a { 
    color: #FB4D4D; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 
/* 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; border: none;} 
/*2e drop*/ 
/* Dropdown Button */ 
.dropbtn2 { 
    font-size: 15px; 
    font-family: 'Open Sans', sans-serif; 
background-color: white; 
    color: #FB4D4D; 
    padding: 5px; 
    border: none; 
    cursor: pointer; 
} 
/* The container <div> - needed to position the dropdown content */ 
.dropdown2 { 
    position: relative; 
} 
/* Dropdown Content (Hidden by Default) */ 
.dropdown-content2 { 
    display: none; 
    position: absolute; 
    background-color: white; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 
/* Links inside the dropdown */ 
.dropdown-content2 a { 
    color: #FB4D4D; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 
/* Change color of dropdown links on hover */ 
.dropdown-content2 a:hover {background-color: #f1f1f1} 
/* 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; border: none;} 
</style>

来源

2017-08-27 vanberla

不完全清楚你的问题。你的第一个按钮按照你的预期工作正确吗？或者你想只点击文本而不是填充？ – Rakib

.dropbtn2 { font-size：15px; font-family：'Open Sans'，sans-serif; background-color：white; color：＃FB4D4D; padding：0px; margin：0px; border：none;光标：指针; } – Rakib

.dropdown2 { position：relative; margin：5px; } – Rakib

以下是工作示例。当您点击按钮时，这也会移除蓝色边框。 button:focus {outline:0;}它将删除蓝色边框。现在这将工作。

<!DOCTYPE html> 
<html> 

<head> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="description" content="Fullscreen backgrounds with centered content"> 
</head> 

<body> 
    <div class="col-12 navbar-0"> 
     <div class="col-10 col-container col-center-block navbar-1"> 
      <div class="colom col-3 home"><strong><a href="index.php">HOME</a></strong></div> 
      <div class="colom col-3 dropdown aanbod"> 
       <button onclick="myFunction()" class="dropbtn">ONS AANBOD</button> 
       <div id="myDropdown" class="dropdown-content col-12"> 
        <a href="index.php?option=com_content&view=article&id=2">WebDesign</a> 
        <a href="index.php?option=com_content&view=article&id=6">Retoucheren</a> 
       </div> 
      </div> 
      <div class="colom col-3 dropdown2 portfolio"> 
       <button onclick="myFunction2()" class="dropbtn2">PORTFOLIO</button> 
       <div id="myDropdown2" class="dropdown-content2 col-12"> 
        <a href="index.php?option=com_content&view=article&id=4">Websites</a> 
        <a href="index.php?option=com_content&view=article&id=7">Retoucheringen</a> 
       </div> 
      </div> 
      <div class="colom col-3 contact"><strong><a href="index.php?option=com_content&view=article&id=8">CONTACT</a></strong></div> 
     </div> 
    </div> 
    <style> 
    /* Navigation */ 

    .navbar-0 { 
     height: auto; 
    } 

    .navbar-1 { 
     text-align: center; 
     color: #FB4D4D; 
     padding: 0px; 
    } 

    .home, 
    .contact { 
     padding: 5px; 
    } 
    /* Dropdown Button */ 

    .dropbtn { 
     text-align: center; 
     font-size: 15px; 
     font-family: 'Open Sans', sans-serif; 
     background-color: white; 
     color: #FB4D4D; 
     padding: 0px; 
     margin: 0px; 
     border: none; 
     cursor: pointer; 
     font-weight: bold; 
    } 
    /* The container <div> - needed to position the dropdown content */ 

    .dropdown { 
     position: relative; 
     margin: 5px; 
    } 
    /* Dropdown Content (Hidden by Default) */ 

    .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: white; 
     min-width: 160px; 
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
     z-index: 1; 
    } 
    /* Links inside the dropdown */ 

    .dropdown-content a { 
     color: #FB4D4D; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
    } 
    /* 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; 
     border: none; 
    } 
    /*2e drop*/ 
    /* Dropdown Button */ 

    .dropbtn2 { 
     font-size: 15px; 
     font-family: 'Open Sans', sans-serif; 
     background-color: white; 
     color: #FB4D4D; 
     padding: 0px; 
     margin: 0px; 
     border: none; 
     cursor: pointer; 
     font-weight: bold; 
    } 
    /* The container <div> - needed to position the dropdown content */ 

    .dropdown2 { 
     position: relative; 
     margin: 5px; 
    } 
    /* Dropdown Content (Hidden by Default) */ 

    .dropdown-content2 { 
     display: none; 
     position: absolute; 
     background-color: white; 
     min-width: 160px; 
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
     z-index: 1; 
    } 
    /* Links inside the dropdown */ 

    .dropdown-content2 a { 
     color: #FB4D4D; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
    } 
    /* Change color of dropdown links on hover */ 

    .dropdown-content2 a:hover { 
     background-color: #f1f1f1 
    } 
    /* 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; 
     border: none; 
    } 

    button:focus { 
     outline: 0; 
    } 
    </style> 
    <script type="text/javascript"> 
    function myFunction() { 
     document.getElementById("myDropdown").classList.toggle("show"); 
    } 

    /*If you bind 2 onclick then only last one will fire*/ 

    window.onclick = function(event) { 
     if (!event.target.matches('.dropbtn')) { 
      removeShow("dropdown-content"); 
     } 

     if (!event.target.matches('.dropbtn2')) { 
      removeShow("dropdown-content2"); 
     } 
    } 

    function removeShow(className) { 
     var dropdowns = document.getElementsByClassName(className); 
     var i; 
     for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
       openDropdown.classList.remove('show'); 
      } 
     } 
    } 

    function myFunction2() { 
     document.getElementById("myDropdown2").classList.toggle("show"); 
    } 
    </script> 

</html>

来源

2017-08-27 09:38:33 Rakib

对于可访问性的原因，你不应该只是'按钮：focus {outline：0;}' –

感谢您的解决方案，但它仍然无法正常工作。点击后蓝色边框消失，但第二次点击现在不起作用。纠正我，如果我错了，但你不是只调整填充和边距？我想子菜单尽快下拉当您点击文本，而不是填充...复制了完整的代码，它没有工作不幸... – vanberla

你能为我提供完整的源代码，看这个问题？无法完全理解您的要求。我没有添加打开下拉功能，我只是解决了点击文本问题（你将不得不用你自己的代码更新这两个功能）。请用完整的源代码更新您的问题。我需要看到你的JS代码。 – Rakib

点击按钮不响应当点击文本

回答

相关问题