javascript - 使用 Onclick 事件将 div 移动到容器左侧的任何选项

Question

我正在研究 JavaScript 和 jQuery，我的问题与divHTML 页面中的 s 有关。鉴于我div在 HTML 页面中使用 2 ，是否有任何选项可以减小一个的大小div并扩展另一个 usingonclick事件的大小。我在这里有一个小提琴div，单击时与另一个 div 重叠。

这是我的代码：

$(function() {
  var expanded = false;
  $('#sidebar').click(function() {
    if (!expanded) {
      $(this).animate({'left' : '70px'}, {duration : 400});
      expanded = true;
    }
    else {
      $(this).animate({'left' : '565px'}, {duration: 400});
      expanded = false;
    }
  });
}); 

Answer 1

您可以使用下面的代码在 onclick 事件中进行向下滑动和向上滑动

$(function()
  {
      var expanded = false;
      $('#flip').click(function(){
          $("#panel").slideToggle("slow");
      });
  })

查看jqfaq.com上的工作示例

Answer 2

如果你想反之亦然，请查看演示http://jsfiddle.net/yeyene/3DpfJ/47/

  $('#sidebar').click(function(){
      $(this).animate({width:'100px'}, 400);
      $('#steam').animate({width:'500px'}, 400);
  });
  $('#steam').click(function(){
      $(this).animate({width:'100px'}, 400);
      $('#sidebar').animate({width:'500px'}, 400);
  });

Answer 3

试试这个，http://jsfiddle.net/markipe/3DpfJ/45/

    $(function(){
      var expanded = false;
      $('#sidebar').click(function(){
          if (!expanded)
          {
              $('#sidebar').animate({width:'69%'}, 400);
              $('#steam').animate({width:'29%'}, 400);
              expanded = true;
          }
          else
          {
              $('#sidebar').animate({width:'29%'}, 400);
              $('#steam').animate({width:'69%'}, 400);
              expanded = false;
          }
      });
  });

Answer 4

在下面的演示中，我们可以添加 n 个 div 子“mainContainer” div 请查看 DEMO

http://jsfiddle.net/mahesh2524/RqJt7/6/

<div id="mainContainer">
<div id="steam"></div>
<div id="sidebar" class="sidebar"></div>    
<div id="sidebar2" class="sidebar"></div>