Question

我不喜欢bootstrap侧边栏包装的方式，所以我做了一个但我需要一些帮助：

$('.hidee').click(function(){

    $('.c1').removeClass('col-md-2').addClass('col-md-1');
    $('.c2').removeClass('col-md-10').addClass('col-md-11');
    $('.hidee').removeClass('hidee').addClass('showw');

});
$('.showw').click(function(){

    $('.c1').removeClass('col-md-1').addClass('col-md-2');
    $('.c2').removeClass('col-md-11').addClass('col-md-10');
    $('.showw').removeClass('showw').addClass('hidee');
});

当我使用控制台添加新类时，我看到我有了新类，但是当我点击那个新类的按钮时它不起作用... 此外，当它重新调整这两列时，它看起来像隐藏/显示，我该如何添加一些滑动动画？

更新：

我做了第一部分用于调整大小，但是现在我需要效果，如果有可能的话会有很小的滑动。

完整代码：

$('.sh').click(function(){
var sh = $(this).attr('sh');
if(sh=="hide"){
    $('.c1').removeClass('col-md-2').addClass('col-md-1');
    $('.c2').removeClass('col-md-10').addClass('col-md-11');
    $('.sh').attr('sh','show');
    $('.sh').html('Show');
}else if(sh=="show"){

    $('.c1').removeClass('col-md-1').addClass('col-md-2');
    $('.c2').removeClass('col-md-11').addClass('col-md-10');
    $('.sh').attr('sh','hide');
    $('.sh').html('Hide');

}else{}
});

<button class="btn btn-default sh" sh="hide" style="float: right; margin-top: 0; margin-right: -1em;">Hide</button>

我有两个专栏。

Answer 1

您在单击后添加了类，现有函数将在加载dom时加载。

尝试使用它可以用于新添加的元素到dom

$(document).on('click','.showw',function(){

});

Answer 2

您需要为要调整大小的元素添加CSS过渡，例如：

div {
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

当您动态创建“showw”类并且无法在文档就绪时绑定时，您还需要将click事件绑定到文档。

$(document).on('click', '.hidee', function() {
  $('.c1').removeClass('col-md-2').addClass('col-md-1');
  $('.c2').removeClass('col-md-10').addClass('col-md-11');
  $('.hidee').removeClass('hidee').addClass('showw');
})

$(document).on('click', '.showw', function() {
  $('.c1').removeClass('col-md-1').addClass('col-md-2');
  $('.c2').removeClass('col-md-11').addClass('col-md-10');
  $('.showw').removeClass('showw').addClass('hidee');
});

有关工作示例，请参阅 https://codepen.io/anon/pen/zKxBwN 。

显示/隐藏侧边栏菜单并使用幻灯片效果扩展字幕大小

2 个答案: