双击jQuery幻灯片会触发两次 [英] jQuery slide toggle fires twice on double click

问题描述

我怎样才能防止切换滑动两次双击？

我有一个触发滑动切换的按钮。如果按钮被点击一次，它会切换正常，但如果按钮被单击两次，则滑动切换滑出并立即滑回。

如何将滑动切换到甚至在双击时仍然呆在外面？

这里的代码： https://codepen.io/anon/pen/Ljgqjo

JS：

.container {width：300px;高度：200像素; overflow：hidden;}＃one {background：blue;宽度：300像素; height：200px;}＃two {background：purple;宽度：300像素;显示：无; height：200px;}

< script src =https ：//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/点击我滑动< / button>< div class =container>< div class =container> < div id =one>< / div> < div id =two>< / div>< / div>

解决方案

在这里，您可以使用 http： //jsfiddle.net/nya99njz/2/

var滑动= false; $（'button'）。on（'click dblclick'，function（）{if（！sliding）{sliding = true; $（'＃one'）。fadeOut（'slow'，function（）{ $（'＃two'）。toggle（'slide'，{direction：'right'}，800，function（）{sliding = false;}）;}）;}}）;

.container {width：300px;高度：200像素; overflow：hidden;}＃one {background：blue;宽度：300像素; height：200px;}＃two {background：purple;宽度：300像素;显示：无; height：200px;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/点击我滑动< / button>< div class =container>< div class =container> < div id =one>< / div> < div id =two>< / div>< / div>

而不是点击使用 dblclick 。

希望这会帮助你。

How can I prevent toggle from sliding twice on double click?

I have a button that triggers a slide toggle. It toggles fine if the button is clicked once but if the button is clicked twice the slide toggle slides out then immediately slides back in.

How can I get the slide toggle to stay out even on double click?

Code here: https://codepen.io/anon/pen/Ljgqjo

JS:

$('button').on('click', function(){
    $('#one').fadeOut('slow', function(){
        $('#two').toggle('slide', {direction: 'right'}, 800, function(){
            

        });
    });
});

.container{
  width:300px;
  height:200px;
  overflow:hidden;
}
#one{
  background:blue;
   width:300px;
  height:200px;
}
#two{
  background:purple;
   width:300px;
  display:none;
  height:200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
  <div id="one">
</div>
  <div id="two">
</div>
</div>

解决方案

Here you go with a solution http://jsfiddle.net/nya99njz/2/

var sliding = false;
$('button').on('click dblclick', function(){
  if(!sliding){
    sliding = true;
    $('#one').fadeOut('slow', function(){
      $('#two').toggle('slide', {direction: 'right'}, 800, function(){
        sliding = false;
      });
    });
  }
});

.container{
  width:300px;
  height:200px;
  overflow:hidden;
}
#one{
  background:blue;
   width:300px;
  height:200px;
}
#two{
  background:purple;
   width:300px;
  display:none;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
  <div id="one">
</div>
  <div id="two">
</div>
</div>

Instead of click use dblclick.

Hope this will help you.

这篇关于双击jQuery幻灯片会触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！