javascript - 单击下拉按钮时使区域缩小的任何选项

Question

我正在研究 jquery 和 javascript。我正在使用一个下拉按钮，该按钮位于容器的右上角。

那么，当单击下拉按钮时，是否有任何选项可以使容器缩小或向左移动。反之亦然。

我也有一个小提琴，它有一个从左到右滑动和反转的容器。但我正在寻找一种解决方案，只要单击下拉按钮，容器就会缩小或向左移动。这是它的小提琴。

代码：

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

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

Answer 1

在 js fiddle 链接中尝试以下解决方案。http://jsfiddle.net/3DpfJ/50/

  [1]: http://jsfiddle.net/3DpfJ/50/

Answer 2

http://jsfiddle.net/33rHZ/1/

这个小提琴使用.change事件&我已经注释掉了检查if expanded，因为我认为你不需要它。但如果你这样做，只需删除我的评论，它应该可以正常工作。

总之：

$(function()
  {
      $('#sidebar').change(function(){
          {
             $('#sidebar').animate({width:'69%'}, 400);
             $('#steam').animate({width:'29%'}, 400);
             $('#sidebar').animate({width:'29%'}, 400);
             $('#steam').animate({width:'69%'}, 400);
          }    
      });
  });

很整洁。