如何通过单击关闭菜单

Question

I have the following code that works fine:

It is hosted at codepen here: 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);
    }

  });

});

The thing is that if I click on an already opened menu (its h1), it does not close.

Since I know very little JavaScript, could someone suggest me an approach to closing a menu that is opened by clicking on its header?

Any pointers will be very much appreciated.

Regards

Marc.

Answer 1

Updated the JavaScript Please refer the 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

If you want, an easier approach to close an opened title would be to check out jQuery's slideToggle(). It seems like this might be something you would be interested in.

source: http://api.jquery.com/slidetoggle/

Answer 3

Here is the updated link:

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

code:

$(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);
    }

  });

});