Question

我有一张带有“Plus”图标的标准卡片，点击后会变成“减号”图标并让用户看到内容如果用户再次点击此图标“减号”，则内容将被隐藏，图标“加”将替换图标“减号”。

它工作正常，但问题是至少在我的电脑（chrome 40）和我的手机（android / chrome）上，如果我真的快速点击两次（如双击），所有都会“卡住”而是当没有内容时看到“加号”图标我最终会看到我想要的相反。

例如，如果我在“加号”上快速双击，这就是我所看到的（我不应该看到“当”加“图标可见时这是我的内容）：

怎么办？

我尝试使用a debounce script以及类似下面的内容，但它不起作用：

function debounce(fn, wait) {
  var timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
      fn.apply(this, arguments)
    }, (wait || 1));
  }
}

if (window.addEventListener) {
      // For all major browsers, except IE 8 and earlier
      window.addEventListener('resize', debounce(function () {
        console.log('clicked');        
        clickhere();
      }, 250));

function clickhere() {
  var list = $('.cards-list')
  $('li', list).click(function(e){ 
    var card=$(this);
    $(this).find(".glyphicon").toggleClass("glyphicon-   
  minus").toggleClass("glyphicon-plus");
  });
 }

当前代码：

HTML

<div id="operation-zone">
        <ul class="cards-list">

        <li class="card 354" data-opcode="CATIMINI26">

            <div class="card-content" id="accordion_354"> 

          <a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">

            <i class="glyphicon glyphicon-plus detail-icon_354"></i>
          </a>

          <div class="card-image card-lazy-preloader" id="accordion2">              
            <a href="/campaigns/xxxxx">
            </a><figure><a href="/campaigns/xxxxxx">   </a>         
                            <!-- responsive image -->
                            <img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">  
                        </figure>

                </div>



            </div> 

          <div id="collapseOne_354" class="one-column-info details panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">

              <div id="DivHomeOperationDescription_52850" class="description">
                  this is the content
              </div>

              <div class="card-info-actions">
                <a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now &gt;</a>
              </div>
          </div>



        </li>

                </ul>

JS

 var list = $('.cards-list')
$('li', list).click(function(e){ 
  var card=$(this);
  $(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});

CSS

.cards-list {
    list-style: none;
    display: block;
    height: auto;
}
.card {
    text-align: left;
    width: 100%;
    border-bottom: 1px solid black;     
    position: relative;
}

.card-content {
    background: #fff;
    position: relative;
}
.card-image {
    vertical-align: top;
    img {
        width: 100%;
        height: 100%;
        position: absolute;
      top: 0;
      left: 0;
      color: green; 
    }
  position: relative;
  line-height: 0;
  overflow: hidden;
    padding-bottom: 33.88%;
}
.container .jumbotron {
  padding-left: 0px;
  padding-right: 0px;
}

.card-detail-opener {  
        color: green;
      font-size: 16px;
      text-align: center;
      padding-left: 1px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 27px;
      background: grey;
        position: absolute;
      z-index: 2;
      opacity: .75;
      filter: alpha(opacity=75);
      bottom: 60%;
      right: 30%;
        &:hover { background: #7E7E7E; }
        &:focus { background: #7E7E7E; }
    }

}

.card-detail-opener:link {
    color: green;

}
.glyphicon.glyphicon-remove {
    color: #333;
    &:hover { color: green; }
    &:focus {   color: green; }
}
.glyphicon.glyphicon-plus { 
     top:1px;
        color: #333;
        &:hover { color: #ffffff; }
        &:focus {   color: #ffffff; }

}
.glyphicon.glyphicon-minus {    
        top:2px;
        padding-right: 2px;//tweak to center
        color: #333;
        &:hover { color: #ffffff; }
        &:focus {   color: #ffffff; }

}


// Content of the card details in the 1-column view
.card .details {

        padding-top: 10px;
        background-color: rgba(255,255,255,1);

}
.details {
    padding-left: 1em;
}
.details .dates { 
    padding-top: 10px; 
    font-size: .8em;
  line-height: 1.6em;
  color: #464650;
  margin-right: 1em;
  background-size: 90px auto !important;
  background-repeat: no-repeat !important;
  background-position-x: right !important;
  background-position-y: 0px !important;    
  margin-bottom: 8px; 
}
.details .baseline {
    color: #888;
    font-size: 0.75em;
    line-height: 0.4em;
}
.details .description {
    font-size: .65em;
    color: #464650; 
    line-height: 1.1em;
    overflow: hidden;

}
// End of content of the card details in the 1-column view
.card-info-actions {
    float: right;
    padding: 0 5px 2px 0;
    clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
    font-size: 15px;
}

.card-short-info a.dateSales {
  color: #464650;
}
.info-overlay {
  display:none;
  z-index:999;
  position:absolute;
  height:100%;
  width: 100%;
  background-color: rgba(255,255,255,.9);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
  transition: all .4s ease-in-out;
  border-bottom: 4px solid green;
}

.close-overlay {
  float:right;
  padding:5px;
}

.info-overlay a {
    display: block;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
}

因为它非常棘手，所以赞赏与解决方案工作共享更新的jsfiddle

Answer 1

一个简单的解决方案可能是使用justClicked变量（设置为false onload）来跟踪我们是处理双击还是单击：

点击到达时，在您执行任何操作之前，请查看是否justClicked===true。如果是这样，您知道在最后一秒内发生了点击（见下文），您可以e.preventDefault()并退出。
如果通过了上述检查，请设置justClicked=true，调用setTimeout以在1000毫秒内执行，然后继续使用标准点击处理程序。
在此期间内到达的任何点击（justClick为true）都将无法通过步骤1进行检查，从而中止。
在setTimeout回调中，设置justClick=false。该应用现在已准备好接收并处理新的点击。

Answer 2

<i id="icon" class="glyphicon glyphicon-plus detail-icon_354"></i>

$('#collapseOne_354').on('show.bs.collapse', function() {
  $('#icon').removeClass('glyphicon-plus').addClass('glyphicon-minus');
});
$('#collapseOne_354').on('hide.bs.collapse', function() {
  $('#icon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});

JSFIDDLE

或仅使用CSS：

<i class="glyphicon glyphicon-plus detail-icon_354"></i>

.card-detail-opener[aria-expanded=false] i:before {
  content: '\2b';
}
.card-detail-opener[aria-expanded=true] i:before {
  content: '\2212';
}

JSFIDDLE

Answer 3

<强> Working fiddle

我在这种情况下找到的更好的解决方案是使用标志变量，当用户第一次点击clicks将为1并且将创建setTimeout函数并等待{{1在触发click事件之前。

如果在700ms延迟之前检测到另一次点击（双击的情况），第一个计时器将被清除，并且不会触发点击：

700ms

希望这会有所帮助。

Answer 4

好我尝试了不同的方法。

$('#collapseOne_354').on("hidden.bs.collapse", function(e){
e.preventDefault();
 $(".cards-list").find(".glyphicon").removeClass("glyphicon-
minus").removeClass("glyphicon-plus");
  $(".cards-list").find(".glyphicon").addClass("glyphicon-plus");
});

$('#collapseOne_354').on("shown.bs.collapse", function(e){
 e.preventDefault();
 $(".cards-list").find(".glyphicon").removeClass("glyphicon-
plus").removeClass("glyphicon-minus");
 $(".cards-list").find(".glyphicon").addClass("glyphicon-minus");
});

如果有任何改进，请告诉我。

双击bootstrap图标时阻止事件触发

4 个答案:

JSFIDDLE

JSFIDDLE