堆棧內存溢出
  簡體   English   中英

單擊文本時，單擊按鈕不響應

[英]Click on button doesn't respond when clicked on text

 原文  2017-08-27 09:07:42  1   1    jquery/ button

問題描述

我用兩個單擊按鈕制作了一個導航欄。 當您單擊文本和周圍的5像素（填充為5像素）時，一個響應完美，但是當您單擊周圍的5像素以內時，另一個僅響應，而對文本則不響應。 它們具有相同的代碼，但是我是JS的新手，所以也許我做錯了什么（只需復制代碼，然后在第二個代碼后面加上“ 2”）。 誰能幫助我，以便單擊僅發生在文本上，而不發生在文本周圍。 另外，單擊時會有一個藍色邊框。 我將border設置為：none，但似乎不是。 謝謝！ 

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

1 個解決方案

解決方案1
 1 已采納  2017-08-27 09:38:33

這是工作示例。 當您單擊按鈕時，這也會刪除藍色邊框。 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 .click() function 在單擊按鈕時不起作用 當按鈕（單擊）時，jquery .click（）不會顯示預期的文本，並且文本在for循環中運行。 按鈕和文本均由其類別引用 單擊按鈕時，jQuery不會響應 屏幕閱讀器，即當單擊按鈕時更改文本時，JAWS無法讀取按鈕的文本嗎？ jquery：如何在單擊和單擊時更改按鈕上的文本 單擊“開始”按鈕時，“開始”按鈕不顯示問題 jQuery不響應我的點擊事件 添加的列表視圖不響應點擊 JS點擊功能不響應 使用ASP.NET MVC的jQuery按鈕單擊事件未按預期響應
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM