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

发布于11月22日

我有一个从右向左滑动的滑动switch .我有大约div elements个，我想在点击它们的时候只显示slideToggle，而不是再次点击时关闭那个div element.仅在单击slideToggle中的按钮时关闭

我怎么才能做到呢？Here is my detailed code jsfiddle

推荐答案

我已经将您的jsfiddle转换为下面的StackOverflow代码片段.

我在代码中添加了一个额外的函数slideOpen().该函数判断is_collapsed是否为true.如果满足条件，该函数将打开滑块.

这里的诀窍是在函数的末尾将is_collapsed设置为false，这样它就不会再次运行动画并关闭滑块.

现在，关闭滑块的唯一方法是单击使用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>