切换多个分区&单击时停用
Toggling Multiple Divs & Deactivating On Click
在写这个问题之前，我一直在寻找解决方案，但到目前为止还找不到合适的解决方案。
我有三个div容器，它们是内联的，有两个状态，一个悬停状态和一个活动状态。悬停时变暗（不透明度0.5）单击时变暗更多（0.8）。然后我创建了一个自定义状态，以便在单击时激活下拉div框时，激活较暗状态保持不变。
所有三个div容器都有一个下拉框，该下拉框在单击时被激活。
除了以下几点对我来说一直是一个症结之外，我还有所有这些工作要做
-
单击任意一个div容器时，所有容器都变暗（不透明度0.8），表示已激活，但希望仅将选定的容器变暗，而不是一次将所有容器变暗。
-
可以通过单击页面上的任何位置来关闭下拉列表。单击十字架时已成功关闭。
-
当选择了其中一个容器并且下拉列表可见时，任何容器都不应该是可点击的。我已经设法禁用了指针操作，但没有实际的点击，因为我不希望出现同时有多个下拉菜单的情况。此外，即使指针操作已被禁用，仍然可以单击，然后激活或停用自定义的变暗活动状态。
我已经尝试了许多JavaScript停用脚本，但没有一个对我有效
代码如下：
创造性生产
内容分发
付费媒体
客户让我们实现可衡量的结果；我们的专家团队确保了这一点。我们的目标是在社交渠道上非常平易近人。所以，如果你想知道我们的秘密，但不能在我们的博客中学习，你知道在哪里可以找到我们。 客户让我们实现可衡量的结果；我们的专家团队确保了这一点。我们的目标是在社交渠道上非常平易近人。所以，如果你想知道我们的秘密，但不能在我们的博客中学习，你知道在哪里可以找到我们。HTML
<div class="cheader" style="padding-bottom: 0;">
<div class="service-container">
<div class="bgbox" onclick="dropdown()">
<div id="service-box">
<h3> CREATIVE PRODUCTION </h3>
</div>
</div>
<div class="bgbox" style="border-left-width: 0; border-right-width: 0;"
onclick="dropdown2()">
<div id="service-box2">
<h3> CONTENT DISTRIBUTION </h3>
</div>
</div>
<div class="bgbox" onclick="dropdown3()">
<div id="service-box3">
<h3> PAID MEDIA </h3>
</div>
</div>
</div>
<div id="serv-desc-box">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px; ">Clients
engage us to achieve measurable results; our team of specialists ensure that
happens. We aim to be very approachable on the social channels. So if you
want to know our secrets and can't learn them in our blogs, you know where
to find us.</p><i class="fa fa-times" aria-hidden="true" onclick
="close_box()"></i>
</div>
<div id="serv-desc-box2">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px;">Clients
engage us to achieve measurable results; our team of specialists ensure that
happens. We aim to be very approachable on the social channels. So if you
want to know our secrets and can't learn them in our blogs, you know where
to find us.</p><i class="fa fa-times" aria-hidden="true" onclick
="close_box2()"></i>
</div>
<div id="serv-desc-box3">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px;">Clients
engage us to achieve measurable results; our team of specialists ensure that
happens. We aim to be very approachable on the social channels. So if you
want to know our secrets and can't learn them in our blogs, you know where
to find us.</p><i class="fa fa-times" aria-hidden="true" onclick
="close_box3()"></i>
</div>
<div class="cheader">
<div class="scontainer" style="padding: 20px 0;">
<h3>Get in touch</h3>
[contact-form-7 id="65" title="Contact form 1"]
</div>
</div>
</div>
CSS
/* Services */
.bgbox { width: 33%; max-width: 628px; height: 474px; display: inline-block;
position: relative; margin-left: -3px; margin-right: -3px; z-index: 2;
border: 5px solid #fff; }
#service-box, #service-box2, #service-box3 {width: 100%; max-width: 628px;
height: 474px; display: inline-block; position: relative; z-index: 2; }
#service-box h3, #service-box2 h3, #service-box3 h3 { position: relative;
top: 44%; word-wrap: break-word; z-index: 4; }
.shade-a { background:rgba(0,0,0,.5)!important; opacity:0.8; -webkit-
transition: opacity .25s ease; -moz-transition: opacity .25s ease;}
#service-box:active, #service-box2:active, #service-box3:active {
opacity:0.8!important; -webkit-transition: opacity .25s ease!important; -
moz-transition: opacity .25s ease!important; }
#service-box:hover, #service-box2:hover, #service-box3:hover {
background:rgba(0,0,0,.5); opacity:0.4; -webkit-transition: opacity .25s
ease; -moz-transition: opacity .25s ease; cursor: pointer; }
#service-box:hover h3, #service-box2:hover h3, #service-box3:hover h3 {
opacity:1.0; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; cursor: pointer; color: #fff; }
.service-title-W {color: #fff!important; }
.disable { pointer-events: none; }
#serv-desc-box { border: 5px solid #fff; background: rgba(0,0,0,.5);
opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; position: relative; display: none; z-index: 2; width: 100%; max-
width: 750px; height: auto; padding: 5px; border-top-width: 0; color: #fff;}
#serv-desc-box2 { border: 5px solid #fff; background: rgba(0,0,0,.5);
opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; position: relative; display: none; left: 33.2%; top: 0; z-index:
2; width: 100%; max-width: 750px; height: auto; padding: 5px; border-top-
width: 0; color: #fff; }
#serv-desc-box3 { border: 5px solid #fff; background: rgba(0,0,0,.5);
opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; position: relative; display: inline-block; display: none; left:
59.6%; top: 0; z-index: 2; width: 100%; max-width: 750px; height: auto;
padding: 5px; border-top-width: 0; color: #fff; }
JavaScript
//Show/Hide Services Description Onclick
function dropdown() {
document.getElementById('serv-desc-box').style.display = "block";
}
function close_box() {
document.getElementById('serv-desc-box').style.display = "none";
}
function dropdown2() {
document.getElementById('serv-desc-box2').style.display = "block";
}
function close_box2() {
document.getElementById('serv-desc-box2').style.display = "none";
}
function dropdown3() {
document.getElementById('serv-desc-box3').style.display = "block";
}
function close_box3() {
document.getElementById('serv-desc-box3').style.display = "none";
}
//Toggle active state, service title & disable pointer events
$('.cheader').on('click', function(e){
if($(e.target).attr('id') != 'service-box'){
$('#service-box').toggleClass('shade-a');
$('#service-box h3').toggleClass('service-title-W');
$('#service-box').toggleClass('disable');
$('#service-box2').toggleClass('disable');
$('#service-box3').toggleClass('disable');
}else{
$('#service-box').removeClass('shade-a');
$('#service-box h3').removeClass('service-title-W');
$('#service-box').removeClass('disable');
$('#service-box2').removeClass('disable');
$('#service-box3').removeClass('disable');
}
});
$('.cheader').on('click', function(e){
if($(e.target).attr('id') != 'service-box2'){
$('#service-box2').toggleClass('shade-a');
$('#service-box2 h3').toggleClass('service-title-W');
$('#service-box').toggleClass('disable');
$('#service-box2').toggleClass('disable');
$('#service-box3').toggleClass('disable');
}else{
$('#service-box').removeClass('shade-a');
$('#service-box2').removeClass('shade-a');
$('#service-box2 h3').removeClass('service-title-W');
$('#service-box').removeClass('disable');
$('#service-box2').removeClass('disable');
$('#service-box3').removeClass('disable');
}
});
$('.cheader').on('click', function(e){
if($(e.target).attr('id') != 'service-box3'){
$('#service-box3').toggleClass('shade-a');
$('#service-box3 h3').toggleClass('service-title-W');
$('#service-box').toggleClass('disable');
$('#service-box2').toggleClass('disable');
$('#service-box3').toggleClass('disable');
}else{
$('#service-box3').removeClass('shade-a');
$('#service-box3 h3').removeClass('service-title-W');
$('#service-box').removeClass('disable');
$('#service-box2').removeClass('disable');
$('#service-box3').removeClass('disable');
}
});
任何帮助都将不胜感激。感谢
JSFiddle：https://jsfiddle.net/0smLcfsx/14/
评论/更新：内联点击处理程序不好，请尽量避免使用它们。（相关：onclick="vs事件处理程序）
bgbox点击的功能非常相似。我已经将它们归结为一个基于ID的通用函数（我还将ID从bgbox内部的div移动到了bgbox本身，因为这是带有点击处理程序的元素，看不出div需要ID的原因）。
我还从弹出窗口中删除了ID（serv-desc-box1,2,3），并将这些元素插入到它们相关的服务框中。这允许在点击处理程序中添加一些有趣的东西！我们应该创建一个能够自行处理的通用函数，而不是繁琐地确定点击了哪个bg框并在每个弹出窗口中调用自定义的下拉函数。通过这种方式，bgbox可以说"打开我容器内的弹出窗口"，而不是"运行自定义功能打开弹出窗口"
针对您的要点：
（1） 这是由您的单击处理程序引起的：$（'.cheader'）.on（'click'，函数（e）{您已经定义了其中三个（每个单击场景一个）。每当单击cheader时，这三个都会运行。我已经将其合并为一个函数，希望它更易于阅读。
（2） 我添加了一个不可见的背景，当显示下拉列表时，它会弹出并具有z索引优先级。每当单击此不可见的背景时，它都会关闭下拉菜单。
（3） 与#2相同。
Javascript
//Show/Hide Services Description Onclick
$(".invisible-background").on("click", function(e){
$(".serv-desc-box").hide();
$(".invisible-background").hide();
})
$(".bgbox").on("click", function(e){
var id = $(this).attr("id");
$("#"+id+"-desc").show();
$(".invisible-background").show();
})
$(".cheader .bgbox").on("click", function(e){
var id = $(this).find("div").attr("id");
toggle_states(id);
});
function toggle_states(id_selector){
var item = $(id_selector);
item.find(".service-title").toggleClass('shade-a');
item.find(".service-title h3").toggleClass('service-title-W');
item.find(".service-title").toggleClass('disable');
$(".service-title:not(#id_selector)").toggleClass('disable');
}
HTML
<div class="cheader" style="padding-bottom: 0;">
<div class="service-container">
<div class="invisible-background"></div>
<div id="service-box" class="bgbox">
<div class="service-title">
<h3> CREATIVE PRODUCTION</h3>
</div>
</div>
<div id="service-box-desc" class="serv-desc-box">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px; ">Clients
engage us to achieve measurable results; our team of specialists ensure that
happens. We aim to be very approachable on the social channels. So if you
want to know our secrets and can't learn them in our blogs, you know where
to find us.</p><i class="fa fa-times" aria-hidden="true"></i>
</div>
<div id="service-box2" class="bgbox" style="border-left-width: 0; border-right-width: 0;">
<div class="service-title">
<h3> CONTENT DISTRIBUTION </h3>
</div>
</div>
<div id="service-box2-desc" class="serv-desc-box">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px;">Clients
engage us to achieve measurable results; our team of specialists ensure that
happens. We aim to be very approachable on the social channels. So if you
want to know our secrets and can't learn them in our blogs, you know where
to find us.</p><i class="fa fa-times" aria-hidden="true"></i>
</div>
<div id="service-box3" class="bgbox">
<div class="service-title">
<h3> PAID MEDIA </h3>
</div>
</div>
<div id="service-box3-desc" class="serv-desc-box">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px;">Clients
engage us to achieve measurable results; our team of specialists ensure that
happens. We aim to be very approachable on the social channels. So if you
want to know our secrets and can't learn them in our blogs, you know where
to find us.</p><i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="cheader">
<div class="scontainer" style="padding: 20px 0;">
<h3>Get in touch</h3>
[contact-form-7 id="65" title="Contact form 1"]
</div>
</div>
</div>
CSS：
/* Services */
.bgbox { width: 33%; max-width: 628px; height: 474px; display: inline-block;
position: relative; margin-left: -3px; margin-right: -3px; z-index: 2;
border: 5px solid #fff; }
.service-box {width: 100%; max-width: 628px;
height: 474px; display: inline-block; position: relative; z-index: 2; }
.service-box h3 { position: relative;
top: 44%; word-wrap: break-word; z-index: 4; }
.shade-a { background:rgba(0,0,0,.5)!important; opacity:0.8; -webkit-
transition: opacity .25s ease; -moz-transition: opacity .25s ease;}
.service-box:active{
opacity:0.8!important; -webkit-transition: opacity .25s ease!important; -
moz-transition: opacity .25s ease!important; }
.service-box:hover{
background:rgba(0,0,0,.5); opacity:0.4; -webkit-transition: opacity .25s
ease; -moz-transition: opacity .25s ease; cursor: pointer; }
.service-box:hover h3{
opacity:1.0; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; cursor: pointer; color: #fff; }
.service-title-W {color: #fff!important; }
.disable { pointer-events: none; }
.serv-desc-box { border: 5px solid #fff; background: rgba(0,0,0,.5);
opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
.25s ease; position: relative; display: none; z-index: 2; width: 41%; max-
width: 750px; height: auto; padding: 5px; border-top-width: 0; color: #fff;}
.invisible-background {
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
z-index:3;
}
}
相关文章：
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 单击F5时如何停止页面加载
- 通过单击表单中的按钮，在代码生成中使用javascript生成字母数字代码
- 在单击任何位置时隐藏元素，而不检查每次DOM单击
- 单击jquery清除输入值
- 通过单击主菜单外部关闭子菜单'不适用于IE，但适用于Firefox&铬
- 在进行动画时防止多次单击(stopPropagation&:animated）
- 用于两个功能的Javascript按钮.提交&单击
- 获取已单击链接的ID&更改其类别
- 谷歌地图计算不同距离的内容框变化&单击按钮
- 触发器Ctrl+z&Ctrl+y键单击按钮
- 添加&单击按钮时减去TR(ID+1）
- 使用$.Ajax进行GET、Update&单击按钮时将JSON放回服务器
- 如何使用浏览器历史api在返回时调用函数&单击前进按钮
- 如何改变“;添加到购物车”"添加到愿望列表”&"将该产品“;单击时按钮边框颜色
- 显示&单击后隐藏元素
- 我该如何打开我的手风琴&字形图标在单击时旋转，在重新单击时反转
- 切换多个分区&单击时停用
- 点击即显示'Div 1'&隐藏'Div 2'&单击同一按钮显示'Di
