Question

看到这个小提琴我被困在哪里： http://jsfiddle.net/kylebellamy/hfLm3n9z/1/

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

我尝试使用名称字段创建三个脚本，它们在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');
});

）

Answer 2

＆＃13;

$('.lexpand').click(function(){
     $(".results").removeClass('collapsed').removeClass('expanded');
    $(".right").toggleClass('expanded');
    $(".left").toggleClass('collapsed');
});
$('.rexpand').click(function(){ 
    $(".results").removeClass('collapsed').removeClass('expanded');
    $(".left").toggleClass('expanded');
    $(".right").toggleClass('collapsed');
});
$('#all').click(function(){
  $(".results").removeClass('collapsed').removeClass('expanded');
    
});

＆＃13;

* { 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%; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:10px !important;" class="selections"><input type="button" name="Left" class="lexpand" value="<<"><input type="button" id="all" name="All" value="All"><input type="button" name="Right" class="rexpand" value=">>"></div>
<div class='left results'></div>
<div class='right results'></div>

＆＃13;

jQuery 2列灵活使用按钮

2 个答案: