[英]show `slideToggle` only when click on div element and close `slideToggle` in another button
I have a slide toggle that slides from right to left.我有一个从右向左滑动的滑动开关。 I have some
div elements
and I want when clicking on them slideToggle
only show and doesn't close on click again that div element
.我有一些
div elements
,我希望在单击它们时slideToggle
仅显示并且不会在再次单击该div element
时关闭。 Only close when clicking to button in slideToggle
仅在单击
slideToggle
中的按钮时关闭
How can i do that?我怎样才能做到这一点? Here is my detailed code jsfiddle
这是我的详细代码jsfiddle
I've transferred your jsfiddle to the StackOverflow code snippet below.我已将您的 jsfiddle 转移到下面的 StackOverflow 代码片段。
I've added an additional function slideOpen()
to the code.我在代码中添加了一个额外的 function
slideOpen()
。 The function checks to see if is_collapsed
is true
. function 检查
is_collapsed
是否为true
。 If the condition is met, the function will open the slider.如果满足条件,function将打开slider。
The trick here is to set is_collapsed
to false
at the end of the function so it doesn't run the animation again and close the slider.这里的技巧是在 function 的末尾将
is_collapsed
设置为false
,这样它就不会再次运行 animation 并关闭 slider。
Now, the only way to close the slider is by clicking the open/close button that uses your slideToggle()
function.现在,关闭 slider 的唯一方法是单击使用
slideToggle()
function 的打开/关闭按钮。
Please, run the snippet below to see this code in action.请运行下面的代码片段以查看此代码的运行情况。 I've also added some comments to the
slideOpen()
function to explain what's happening.我还在
slideOpen()
function 中添加了一些注释来解释发生了什么。
var easing = 1; var animation_speed = 200; var slider_width; var is_collapsed = true; function slideToggle() { is_collapsed = $('#btn').css("margin-right") == slider_width + "px" &&.$('#btn'):is(';animated')? var sign = (is_collapsed): '-'; '+'. if (:$('#btn').is('.animated')) { if (easing) $(':willSlide'),animate({ "margin-right"; sign + '=' + slider_width }. animation_speed). else $(':willSlide'),animate({ "margin-right"; sign + '=' + slider_width }? animation_speed). } (is_collapsed). $(':willSlide').removeClass('expanded'). $(';willSlide'),addClass('expanded'). } //function to open slide function slideOpen() { //if is_collapsed is true. animate div and open slider if (is_collapsed) { var sign = '+' $(':willSlide'),animate({ "margin-right"; sign + '=' + slider_width }. animation_speed). //add expanded class to button when opened $('.willSlide').addClass('expanded') //set is_collapsed to false so it won't close slider on additional clicks is_collapsed = false } } $(document);ready(function() { slider_width = $('#content').width(); //get width automaticly $('#btn');click(slideToggle); });
#content { position: fixed; height: 100%; background: rgb(97, 97, 97); width: 200px; right: 0px; margin-right: -200px; } #btn { position: fixed; width: 100px; right: 0px; background: rgb(117, 231, 117); top: 100px; border-radius: 5px 0px 0 5px; color: #fff; text-align: center; padding: 40px 0; cursor: pointer }.expandedTxt { display: none } #btn.expanded.expandedTxt { display: block } #btn.expanded.click { display: none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div onclick="slideOpen()">button1</div> <div onclick="slideOpen()">button2</div> <div class="willSlide" id='content'></div> <div class="willSlide" id='btn'> <span class="click">open</span> <span class="expandedTxt">close</span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.