Jquery 点击按钮';单击文本时不响应
我制作了一个带有两个点击按钮的导航栏。当您单击文本和/或5px(填充为5px)时,其中一个完全响应,但另一个仅当您在5px范围内单击时响应,因此不在文本上。他们有相同的代码,但我是JS新手,所以可能我做错了什么(只是复制了代码并在第二个代码后面加了一个“2”)。有谁能帮我,让点击只发生在文本上,而不是周围。此外,当你点击它时,会有一个蓝色边框。我将边界设置为:无,但似乎不是。谢谢Jquery 点击按钮';单击文本时不响应,jquery,button,Jquery,Button,我制作了一个带有两个点击按钮的导航栏。当您单击文本和/或5px(填充为5px)时,其中一个完全响应,但另一个仅当您在5px范围内单击时响应,因此不在文本上。他们有相同的代码,但我是JS新手,所以可能我做错了什么(只是复制了代码并在第二个代码后面加了一个“2”)。有谁能帮我,让点击只发生在文本上,而不是周围。此外,当你点击它时,会有一个蓝色边框。我将边界设置为:无,但似乎不是。谢谢 <div class="col-12 navbar-0"> <div class="col
<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>
ONS AANBOD
投资组合
/*航行*/
.导航栏-0{
高度:自动;
}
.导航栏-1{
文本对齐:居中;
颜色:#fb4d;
填充:0px;
}
.home、.contact{
填充物:5px;
}
/*下拉按钮*/
.dropbtn{
文本对齐:居中;
字体大小:15px;
字体系列:“开放式Sans”,无衬线;
背景色:白色;
颜色:#fb4d;
填充物:5px;
边界:无;
光标:指针;
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置:相对位置;
}
/*下拉内容(默认情况下隐藏)*/
.下拉内容{
显示:无;
位置:绝对位置;
背景色:白色;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
/*下拉列表中的链接*/
.下拉内容a{
颜色:#fb4d;
填充:12px 16px;
文字装饰:无;
显示:块;
}
/*显示下拉菜单(当用户单击下拉按钮时,使用JS将此类添加到.dropdown内容容器)*/
.show{显示:块;边框:无;}
/*2e下降*/
/*下拉按钮*/
.dropbtn2{
字体大小:15px;
字体系列:“开放式Sans”,无衬线;
背景色:白色;
颜色:#fb4d;
填充物:5px;
边界:无;
光标:指针;
}
/*容器-需要定位下拉内容*/
.下拉列表2{
位置:相对位置;
}
/*下拉内容(默认情况下隐藏)*/
.下拉列表2{
显示:无;
位置:绝对位置;
背景色:白色;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
/*下拉列表中的链接*/
.下拉列表内容2 a{
颜色:#fb4d;
填充:12px 16px;
文字装饰:无;
显示:块;
}
/*更改悬停时下拉链接的颜色*/
.dropdown-Content2A:悬停{背景色:#f1f1}
/*显示下拉菜单(当用户单击下拉按钮时,使用JS将此类添加到.dropdown内容容器)*/
.show{显示:块;边框:无;}
以下是工作示例。当您单击按钮时,这也将删除蓝色边框<代码>按钮:焦点{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>
测验
安博德酒店
文件夹
/*航行*/
.导航栏-0{
高度:自动;
}
.导航栏-1{
文本对齐:居中;
颜色:#fb4d;
填充:0px;
}
家
.联系方式{
填充物:5px;
}
/*下拉按钮*/
.dropbtn{
文本对齐:居中;
字体大小:15px;
字体系列:“开放式Sans”,无衬线;
背景色:白色;
颜色:#fb4d;
填充:0px;
边际:0px;
边界:无;
光标:指针;
字体大小:粗体;
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置:相对位置;
保证金:5px;
}
/*下拉内容(默认情况下隐藏)*/
.下拉内容{
显示:无;
位置:绝对位置;
背景色:白色;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
/*下拉列表中的链接*/
.下拉内容a{
颜色:#fb4d;
填充:12px 16px;
文字装饰:无;
显示:块;
}
/*显示下拉菜单(当用户单击下拉按钮时,使用JS将此类添加到.dropdown内容容器)*/
.表演{
显示:块;
边界:无;
}
/*2e下降*/
/*下拉按钮*/
.dropbtn2{
字体大小:15px;
字体系列:“开放式Sans”,无衬线;
背景色:白色;
颜色:#fb4d;
填充:0px;
边际:0px;
边界:无;
光标:指针;
字体大小:粗体;
}
/*容器-需要定位下拉内容*/
.下拉列表2{
位置:相对位置;
保证金:5px;
}
/*下拉内容(默认情况下隐藏)*/
.下拉列表2{
显示:无;
位置:绝对位置;
背景色:白色;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
/*下拉列表中的链接*/
.下拉列表内容2 a{
颜色:#fb4d;
填充:12px 16px;
文字装饰:无;
显示:块;
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容2 a:悬停{
背景色:#f1f1
}
/*显示下拉菜单(当用户单击下拉按钮时,使用JS将此类添加到.dropdown内容容器)*/
.表演{
显示:块;
边界:无;
}
按钮:焦点{
大纲:0;
}
函数myFunction(){
document.getElementById(“myDropdown”).classList.toggle(“show”);