jQuery 2列灵活使用按钮

Question

看到这个 fiddle 我被困在哪里: http://jsfiddle.net/kylebellamy/hfLm3n9z/1/

我希望按钮进行折叠，而不是 DIV，但我无法弄清楚如何使触发器成为它们而不是 DIV。我意识到 All 不是必需的，但从典型用户的 Angular 来看，从长远来看，它会减少混淆。

我尝试使用名称字段创建三个脚本，用于当前在 JS 中显示“div”的位置，但这会停止展开和折叠的所有功能。

感谢您提供的任何帮助!

HTML

<div style="height:10px !important;" class="selections">
<input type="button" name="ButtonLeft" value="&#60;&#60;">
<input type="button" name="ButtonAll" value="All">
<input type="button" name="ButtonRight" value="&#62;&#62;"></div>
<div class='left results'></div>
<div class='right results'></div>

CSS

* { margin: 0; }
div.results { min-height: 10em; transition: linear 0.5s; }
div.selections { min-height: 3em; }
.left {
  float: left;
  width: 49%;
  background: crimson;
}
.right {
  float: right;
  width: 49%;
  background: dodgerblue;
}
.expanded { width: 100%; }
.collapsed { width: 0%; }

JS

$('div').click(function(){
    $(this).toggleClass('expanded')
    .siblings().toggleClass('collapsed');
});

Answer 1

这样的事情可能会起作用:

$("input[name='Left']").click(function(){
    $('div.left').toggleClass('expanded')
    .siblings().toggleClass('collapsed');
});

$("input[name='Right']").click(function(){
    $('div.Right').toggleClass('expanded')
    .siblings().toggleClass('collapsed');
});


$("input[name='All']").click(function(){
    $('div.Right').toggleClass('expanded').siblings().toggleClass('collapsed');
    $('div.Left').toggleClass('expanded').siblings().toggleClass('collapsed');
});

;)