单击文本时，单击按钮不响应

Question

I made a navigation bar with two click on buttons. 我用两个单击按钮制作了一个导航栏。 One responds perfectly when you click on the text and or 5px around (padding is 5px) but the other only responds when you click within 5px around so not on the text. 当您单击文本和周围的5像素（填充为5像素）时，一个响应完美，但是当您单击周围的5像素以内时，另一个仅响应，而对文本则不响应。 They have the same code but I'm new to JS so maybe I did something wrong (just copied the code and put a '2' behind the second one). 它们具有相同的代码，但是我是JS的新手，所以也许我做错了什么（只需复制代码，然后在第二个代码后面加上“ 2”）。 Can anyone help me so that the click on happens on the text only and not around. 谁能帮助我，以便单击仅发生在文本上，而不发生在文本周围。 Also, there is a blue border when you click on it. 另外，单击时会有一个蓝色边框。 I set border to :none but doesn't seem to be it. 我将border设置为：none，但似乎不是。 Thanks! 谢谢！

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

Answer 1

Here is the working example. 这是工作示例。 This will also remove the blue border when you will click on the button. 当您单击按钮时，这也会删除蓝色边框。 button:focus {outline:0;} it will remove the blue border. button:focus {outline:0;} ，它将删除蓝色边框。 Now this will work. 现在，这将起作用。

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

单击文本时，单击按钮不响应

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-27 09:38:33

单击文本时，单击按钮不响应

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-27 09:38:33

解决方案1
1 已采纳 2017-08-27 09:38:33