Javascript 切换多个div&；单击即停用

在写这个问题之前，我一直在寻找解决方案，但到目前为止还无法找到合适的解决方案

我有三个div容器，它们是内联的，有两个状态，一个悬停状态和一个活动状态。悬停时变暗（不透明度0.5），单击时变暗更多（0.8）。然后，我创建了一个自定义状态，以便在单击下拉div框时，激活较暗状态保持打开状态

所有三个div容器都有一个下拉框，单击即可激活

除了以下几点之外，所有这些都是我的工作重点

单击任何一个div容器时，所有容器都变暗（不透明度0.8），表示已激活，但只希望选定的容器变暗，而不是一次全部变暗

可以通过单击页面上的任意位置来关闭下拉列表。当点击十字架时，已经成功地关闭了它

当选择其中一个容器且下拉列表可见时，所有容器都不应可单击。我已经成功地禁用了指针操作，但没有实际的点击，因为我不希望出现可以同时有多个下拉菜单的情况。此外，即使已禁用指针操作，仍可以单击，然后激活或禁用自定义变暗活动状态

我尝试了很多JavaScript停用脚本，但没有一个对我有效

代码如下：

创造性生产 内容分布 付费媒体 客户要求我们实现可衡量的结果；我们的专家团队确保了这一点。我们的目标是在社交渠道上非常平易近人。所以，如果你想知道我们的秘密，却无法从我们的博客中了解，你知道在哪里可以找到我们

客户要求我们实现可衡量的结果；我们的专家团队确保了这一点。我们的目标是在社交渠道上非常平易近人。所以，如果你想知道我们的秘密，却无法从我们的博客中了解，你知道在哪里可以找到我们

HTML

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');
   }
});

任何帮助都将不胜感激。谢谢

jsIDLE：

评论/更新： 内联单击处理程序不好，请尽量避免使用它们。（相关：）

bgbox点击的功能非常相似。我已经将它们归结为一个基于ID的通用函数（我还将ID从bgbox内部的div移动到bgbox本身，因为它是带有click处理程序的元素，并且看不出div需要ID的原因）

我还从弹出窗口（serv-desc-box1,2,3）中删除了ID，并将这些元素插入到它们相关的服务框中。这允许在点击处理程序中使用一些有趣的东西！我们应该创建一个能够自行处理的通用函数，而不是繁琐地确定单击了哪个bg框并在每个弹出窗口中调用定制的下拉函数。这样，bgbox可以说“在我的容器中打开弹出窗口”，而不是“运行自定义函数打开弹出窗口”

针对您的观点：

（1） 这是由单击处理程序引起的： $（'.cheader'）。在（'click'，函数（e）上{ 您已经定义了其中三个（每个单击场景一个）。每当单击cheader时，所有三个都会运行。我已经将其合并为一个函数，希望更易于阅读

（2） 我添加了一个不可见背景，当显示下拉列表时，它会弹出并具有z索引优先级。每当单击此不可见背景时，它都会关闭下拉列表

（3） 与#2相同

HTML

---

您好，Hodrobond。谢谢您的回复。我不确定服务描述框是否在服务框内，因为描述框比服务框宽，应该在服务框下方，也在相邻框下方。这就是为什么我的服务描述框在服务容器外。不确定您是否意识到这一点。继续早上好，安德鲁！我已经更新了小提琴，所以它们现在显示在背景框下面。我想在背景框中插入描述的唯一原因是为了更优雅地处理显示（背景框将“在我内部查找描述”，而不是“查找具有此ID的描述”如果您能更详细地解释一下您的要求，我可能会提供帮助。感谢Hodrobond的帮助。我需要的是dropbox onclick显示在每个div容器的下方。dropbox比div容器长1.25倍，因此将部分位于下一个div下。我可以看到一些场景在这里展开（给我一点时间编辑，按enter键而不是shift+enter键）我可以看到一些场景在这里展开：1.我个人建议将描述框放在服务框内。您可以更改CSS，使描述显示在框下方（如果你增加服务标题的高度，它会将描述向下推。）我相信这个结构也更像你正在尝试执行的2。另一个选择似乎是绝对的样式元素，这不是非常可扩展或可维护。

/* 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; }

//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');
   }
});

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');
}

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

/* 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;
  }
}