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

Question

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

中的按钮时关闭

我该怎么做？ Here is my detailed code jsfiddle

Answer 1

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

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

这里的技巧是在函数结束时将 is_collapsed 设置为 false，这样它就不会再次运行动画并关闭 slider 。

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

请运行下面的代码片段以查看此代码的运行情况。我还在 slideOpen() 函数中添加了一些注释来解释发生了什么。

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>