僅在單擊 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>