Question

我有以下代码可以正常工作：

它在codepen托管： http://codepen.io/anon/pen/opfDd

$(document).ready(function(){
  var animTime = 300,
      clickPolice = false;

  $(document).on('touchstart click', '.acc-btn', function(){
    if(!clickPolice){
       clickPolice = true;

      var currIndex = $(this).index('.acc-btn'),
          targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();

      $('.acc-btn h1').removeClass('selected');
      $(this).find('h1').addClass('selected');

      $('.acc-content').stop().animate({ height: 0 }, animTime);
      $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);

      setTimeout(function(){ clickPolice = false; }, animTime);
    }

  });

});

问题是，如果我点击已经打开的菜单（它的h1），它就不会关闭。

由于我对JavaScript知之甚少，有人可以建议我通过单击其标题来关闭打开的菜单吗？

任何指针都将非常感激。

此致

马克。

Answer 1

更新了JavaScript 请参阅Pen

$(document).ready(function(){
  var animTime = 300,
    clickPolice = false;
  $(document).on('touchstart click', '.acc-btn', function(){
    if(!clickPolice){
      clickPolice = true;
      var currIndex = $(this).index('.acc-btn'),
        targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight(),
        expanded = $(this).find('h1').hasClass('selected');

      if(expanded) {
        $('.acc-btn h1').removeClass('selected');
        $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
        $('.acc-content').stop().animate({ height: 0 }, animTime);
      }else {
        $(this).find('h1').addClass('selected');
        $('.acc-content').stop().animate({ height: 0 }, animTime);
        $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
      }

      setTimeout(function(){ clickPolice = false; }, animTime);
    }
  });
});

Answer 2

如果你愿意，一个更简单的方法来关闭一个打开的标题就是检查jQuery的slideToggle（）。看起来这可能是你感兴趣的东西。

来源：http://api.jquery.com/slidetoggle/

Answer 3

以下是更新后的链接：

http://codepen.io/anon/pen/jdqnm

代码：

$(document).ready(function(){
  var animTime = 300,
      clickPolice = false;

  $(document).on('touchstart click', '.acc-btn', function(){
    if(!clickPolice){
       clickPolice = true;

      var currIndex = $(this).index('.acc-btn'),
          targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();

      $('.acc-btn h1').removeClass('selected');
      $(this).find('h1').addClass('selected');

      $('.acc-content').stop().animate({ height: 0 }, animTime);

      if(!$(this).next().hasClass('open')){
      $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
        $('.acc-content').eq(currIndex).addClass('open')
     //   opened=true;
      }else{
        $('.acc-content').eq(currIndex).stop().animate({ height: 0 }, animTime);
       $('.acc-content').eq(currIndex).removeClass('open')
      }
      setTimeout(function(){ clickPolice = false; }, animTime);
    }

  });

});

如何通过单击关闭菜单

3 个答案: