切换多个分区＆amp;取消激活点击

时间：2016-07-21 11:59:08

标签： javascript html css onclicklistener

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

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

所有三个div容器都有一个下拉框，点击后会激活。

我把所有这些都与以下几点分开，这对我来说是一个难点。

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

  2. 可以通过单击页面上的任意位置来关闭下拉列表。点击十字架时设法关闭它。

  3. 当选择其中一个容器并且可以看到下拉列表时，任何容器都不应该是可点击的。我已经设法禁用指针操作但不是实际的点击，因为不希望你可以同时有多个下拉菜单的情况。即使已禁用指针操作，仍然可以单击，然后激活或停用自定义变暗的活动状态。

    4. 我尝试了许多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');
   }
});

    非常感谢任何帮助。感谢

1 个答案:

答案 0 :(得分：1)

JSFiddle：https://jsfiddle.net/0smLcfsx/14/

评论/更新： 内联点击处理程序很糟糕，请尽量避免使用它们。 （相关：onclick="" vs event handler）

您的bgbox点击功能非常相似。我已将它们归结为基于ID的通用函数（我还将ID从bgbox内部的div移动到bgbox本身，因为这是具有click处理程序的元素，可以＆＃ 39;看到div需要ID的原因。）

我还从弹出窗口（serv-desc-box1,2,3）中删除了ID，并将这些元素插入到与它们相关的服务盒中。这允许点击处理程序中的一些有趣的东西！我们应该创建一个能够处理自身的通用函数，而不是通过确定每个弹出窗口中确定单击哪个bg-box并调用自定义下拉函数的严格程序。通过这种方式，bgbox可以说＆＃34;打开容器内的弹出窗口＆＃34;而不是＆＃34;运行自定义函数来打开弹出窗口＆＃34;

对你的观点：

（1）这是由您的点击处理程序引起的： $（＆＃39; .cheader＆＃39;）。on（＆＃39; click＆＃39;，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;
  }
}
相关问题
最新问题