在写这个问题之前,我一直在寻找解决方案,但是到目前为止,找不到合适的东西。
我有三个内联的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 event handler)
您的bgbox点击功能非常相似。我将它们简化为基于ID的泛型函数(我将ID从bgbox内的div移动到bgbox本身,因为这是单击处理程序的元素,看不到原因div将需要ID)。
我还从弹出窗口(serv-desc-box1,2,3)中删除了ID,并将这些元素插入与其相关的服务框中。这允许在点击处理程序中添加一些有趣的东西!我们不必费力确定要单击哪个bg-box并为每个弹出窗口调用自定义的下拉函数,而应该创建一个能够自行处理的通用函数。这样,bgbox可以说“在我的容器中打开弹出窗口”,而不是“运行自定义函数以打开弹出窗口”
给您的要点:
(1)这是由您的点击处理程序引起的:
$('。cheader')。on('click',function(e){
您定义了其中的三个(每个点击方案一个)。只要单击cheader,就会同时运行所有三个。我将其合并为一个函数,希望它更易于阅读。
(2)我添加了一个不可见的背景,该背景弹出并在显示下拉菜单时具有z-index优先级。每当单击此不可见的背景时,它将关闭下拉菜单。
(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;
}
}