搜索
搜索

单击文本时单击按钮没有响应

vanberla 发表于 Dev
15
范贝拉

我做了一个导航栏，点击两次按钮。当您单击文本和/或周围 5px（填充为 5px）时，一个响应完美，但另一个仅在您单击周围 5px 内时响应，而不是在文本上。他们有相同的代码，但我是 JS 新手，所以也许我做错了什么（只是复制了代码并在第二个后面加了一个“2”）。任何人都可以帮助我，以便单击仅发生在文本上而不是周围。此外，单击它时会有一个蓝色边框。我将边框设置为 :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>
拉基布

这是工作示例。当您单击按钮时，这也将删除蓝色边框。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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

单击时按钮没有响应

单击按钮但没有响应

按钮单击没有响应

来自PHP的按钮单击没有响应

按钮对Ionic中的单击没有响应

C＃WebBrowser单击提交按钮没有响应

GUI没有响应按钮单击

JavaFX按钮在第一次单击时没有响应

Discord.js [单击按钮后发送消息时没有响应]

在 React.js 中单击时注销按钮没有响应

单击“退出”时，Tkinker窗口没有响应

图像内的 NavigationLink 在单击时没有响应

传单控件对单击没有响应

我的动态网站没有响应特定的按钮单击

使用 QThread 两次单击按钮 2 后，Pyqt GUI 突然没有响应

为什么单击“开始”按钮后主循环（此代码中的“运行”）没有响应？

Hambuger 菜单在单击时没有响应 (HTML/CSS/JS)

为什么我的表在单击行时没有响应

触摸板没有响应双击单击

按钮没有响应

按钮没有响应

按钮在Onclick上没有响应？

按钮和 AJAX 没有响应

Django提交按钮没有响应

单击后 Bootstrap 导航栏汉堡菜单没有响应

Mac OS X，鼠标移动但鼠标单击和键盘击键没有响应？

为什么每个应用程序运行5秒钟都没有响应，并且停止按钮无法单击？

登录时没有响应

单击时更新按钮文本

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    用日期数据透视表和日期顺序查询

  3. 3

    应用发明者仅从列表中选择一个随机项一次

  4. 4

    Java Eclipse中的错误13，如何解决？

  5. 5

    在Windows 7中无法删除文件（2）

  6. 6

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  7. 7

    套接字无法检测到断开连接

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    有什么解决方案可以将android设备用作Cast Receiver？

  10. 10

    Mac OS X更新后的GRUB 2问题

  11. 11

    ggplot：对齐多个分面图-所有大小不同的分面

  12. 12

    验证REST API参数

  13. 13

    如何从视图一次更新多行（ASP.NET - Core）

  14. 14

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  15. 15

    计算数据帧中每行的NA

  16. 16

    检索角度选择div的当前值

  17. 17

    离子动态工具栏背景色

  18. 18

    UITableView的项目向下滚动后更改颜色，然后快速备份

  19. 19

    VB.net将2条特定行导出到DataGridView

  20. 20

    蓝屏死机没有修复解决方案

  21. 21

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

热门标签

归档