仅在单击 div 元素时显示 `slideToggle` 并在另一个按钮中关闭 `slideToggle`

Question

我有一个从右向左滑动的滑动开关。 我有一些div elements ，我希望在单击它们时slideToggle仅显示并且不会在再次单击该div element时关闭。 仅在单击slideToggle中的按钮时关闭

我怎样才能做到这一点？ 这是我的详细代码jsfiddle

Answer 1

我已将您的 jsfiddle 转移到下面的 StackOverflow 代码片段。

我在代码中添加了一个额外的 function slideOpen() 。 function 检查is_collapsed是否为true 。 如果满足条件，function将打开slider。

这里的技巧是在 function 的末尾将is_collapsed设置为false ，这样它就不会再次运行 animation 并关闭 slider。

现在，关闭 slider 的唯一方法是单击使用slideToggle() function 的打开/关闭按钮。

请运行下面的代码片段以查看此代码的运行情况。 我还在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>