响应式手风琴不起作用

Question

我的自定义响应式手风琴无效。要求是具有桌面视图的标题和内容，但如果它在较小的设备上加载则转为手风琴。我刚刚实现了它。但是，当我重新调整窗口大小时，它不能很好地工作，功能表现出奇怪的动画，有时它不起作用。

任何人都可以帮我找一下代码中的问题吗？

以下是jsBin URL和js代码：

URL：

http://jsbin.com/zarak/5/edit

代码：

if($(window).width() < 360){
   $('h2').on('click', function() {

                var _target = $(this).next('.reponsiveTap');
                if(_target.css('display') == 'none'){
                    _target.slideDown();
                    $(this).addClass('active');
                }else{
                    _target.slideUp();
                    $(this).removeClass('active');
                }               

            });  
  }

else if($(window).width() > 359){
    $('h2').on('click', function() {

      return false;

    });

  }

$(window).resize(function(){

  if($(window).width() < 360){
   $('h2').on('click', function() {

                var _target = $(this).next('.reponsiveTap');
                if(_target.css('display') == 'none'){
                    _target.slideDown();
                    $(this).addClass('active');
                }else{
                    _target.slideUp();
                    $(this).removeClass('active');
                }               

            });  
  }

else if($(window).width() > 359){
    $('h2').on('click', function() {

      return false;

    });

  }

});

非常感谢， Mufeed Ahmad

Answer 1

试试这个，这里的 FIDDLE

$(window).resize(function() {
  if($(this).width() < 360) {
     $('.reponsiveTap').slideUp(400, 'linear');

     $('.in-row h2').on('click', function() {
       $('.reponsiveTap').stop().slideUp(400, 'linear').removeClass('active');
       $(this).next('.reponsiveTap').stop().slideToggle(400, 'linear').addClass('active');
     });
  }
  else {
     $('.reponsiveTap').slideDown(400, 'linear');
     $('.in-row h2').off('click');
  }
});