Question

我正在研究JavaScript和jQuery，我的问题与HTML页面中的div有关。鉴于我在HTML页面中使用了2 div，是否有任何选项可以减少一个div的大小，并使用onclick事件扩展另一个div的大小。我有一个小提琴here，点击后其他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; } }); });。

这是我的代码：

{{1}}

Answer 1

您可以使用以下代码在onclick事件中执行slidingown和slideup

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

查看jqfaq.com

处的工作样本

Answer 2

试试这个，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 3

如果您反之亦然，请查看DEMO 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 4

在下面的演示中，我们可以添加n个div子节点＆＃34; mainContainer＆＃34; 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>

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

4 个答案: