文章/答案/技术大牛

发布

社区首页 >问答首页 >两个按钮，用于滑动相同的div，但以不同的方式(从右到左，从左到右)

问两个按钮，用于滑动相同的div，但以不同的方式(从右到左，从左到右)
EN

Stack Overflow用户

提问于 2019-06-02 16:45:58

回答 4查看 349关注 0票数 0

我只需要用两个按钮从右向左和向后滑动div。

我提供了一段代码，但div幻灯片通常只用于单击buttonStart，在buttonClose上它不滑动。

//custom code start
$(function() {
  $('.showButton').click(function() {
    $('.hidden').show();
    $('.show').hide();
  });
  $('.hideButton').click(function() {
    $('.hidden').hide();
    $('.show').show();
  });
});
$(document).ready(function() {
  //localStorage.removeItem('show'); //to unset an item
  var show = sessionStorage.getItem('show');
  if (show === 'true') {
    $('#content101').show();
  }

  $("#buttonStart").click(function(event) {
    event.preventDefault();
    $('#content101').show();
    sessionStorage.setItem('show', 'true');
  });
  if (document.querySelector("#content101").style.display == "block") {
    $("#buttonStart").hide();
    $("#buttonClose").show();
  } else {
    $("#buttonStart").show();
    $("#buttonClose").hide();
  }
});

$("#buttonStart").click(function() {
  {
    $("#content101").toggle("slide");
  }
});
$("#buttonClose").click(function() {
  {
    $("#content101").toggle("slide");
  }
});
//custom code end

#content101 {
  float: right;
  overflow: hidden;
  margin: 0;
  display: none;
  position: absolute;
  right: 0px;
  top: 60px;
  width: 740px;
  padding: 0px;
  background: #ffffff;
}

.hidden {
  display: none;
}

.show {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button id="buttonStart" class="showButton show">Show div</button>
<button id="buttonClose" class="hideButton hidden">Hide div</button>
<div id="content101" class="hidden">Content</div>

我想，点击buttonClose后，它会向后滑动。

css

javascript

jquery

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-06-02 22:03:02

您似乎过于复杂了jquery。你绝对可以把它简化成一个简单的函数。隐藏css中的一个按钮(取决于您希望它在开始时隐藏还是可见)

见示例片段：

$("#buttonStart").click(function() {
  {
    $("#content101").toggle("slide");
    $('#buttonStart').hide();
    $('#buttonClose').show();
  }
});
$("#buttonClose").click(function() {
  {
    $("#content101").toggle("slide");
    $('#buttonStart').show();
    $('#buttonClose').hide();
  }
});

#content101 {
  display: block;
  float: left;
  height: 100px;
  overflow: hidden;
  background: #f0e68c;
  width: 100%;
}

button {
  margin-top: 110px;
  position: relative;
  display: block;
}

#buttonStart {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content101">
  <p>
    I want this to slide open and close
  </p>
</div>
<br>
<button id="buttonStart">
Show
</button>

<button id="buttonClose">
Hide
</button>

票数 0

Stack Overflow用户

发布于 2019-06-02 21:57:30

您可以切换一个按钮和内容与一个单一的链式函数。

$('.btn').on('click', function() {...

任何带有.btn类的标签都会被点击.

$(this).toggleClass('hide show')...

切换其类.hide/.show以更改其文本(请参阅CSS)

.next('.hidden').animate({width:'toggle'}, 750);

获取带有类.hidden的下一个标记，并向左/右切换它

也可以使用类避免#id。在演示类中，它允许我们只使用一个函数来控制重复标记。

$('.btn').on('click', function(e) {
  $(this).toggleClass('show hide').next('.hidden').animate({
    width: 'toggle'
  }, 750);
});

.hidden {
  overflow: hidden;
  display: none;
  height: 30x;
  border: 3px solid black;
}

.btn {
  display: block;
  width: 100px;
}

.hide:before {
  content: 'Hide ';
}

.show:before {
  content: 'Show ';
}

<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<button class="btn show">Content</button>
<div class="hidden">Content</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

票数 0

Stack Overflow用户

发布于 2019-06-02 21:59:24

这是一个简单的例子，切换和css转换。

HTML

<button id="button">Toggle div</button>
<div id="slide" class="transition"></div>

$('button').on('click', function(){
    $('#slide').toggleClass('open');
})

CSS

#slide {
    background: black;
    height: 100px;
    width: 100%;
    position: relative;
    left: -110%;
}

.open {
    left: 0px !important;
}

.transition {
  -webkit-transition: left 0.3s ease-out;
     -moz-transition: left 0.3s ease-out;
       -o-transition: left 0.3s ease-out;
          transition: left 0.3s ease-out;
}

示例：

https://jsfiddle.net/o2xa0wjr/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56416999

复制

相似问题

问两个按钮，用于滑动相同的div，但以不同的方式(从右到左，从左到右)
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问两个按钮，用于滑动相同的div，但以不同的方式(从右到左，从左到右)EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问两个按钮，用于滑动相同的div，但以不同的方式(从右到左，从左到右)
EN