javascript - 使用 jQuery 隐藏 div onClick

Question

我在这里有一个脚本演示，它允许我在我的网站上显示和隐藏内容。它运行良好。

但是，当我单击链接以显示内容然后再次单击以隐藏它时，它会重新打开它。在显示（“活动”）状态下单击时，我需要它完全隐藏。

谁能解释如何解决这个问题？

 

谢谢你。

 

代码：

$(document).ready(function() {

 $('.showscroll').bind('click', 'h2, h3', function(e) {
   e.preventDefault();

   $(this).toggleClass('active');
   $('.newboxes2').slideUp().delay(200);
   $(this).find('.newboxes2').slideToggle();

               if($(this).is('.active') ) {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               } else {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               }
   if (this.id === 'service29') {
    $('html, body').animate({
      scrollTop: $(this).find('h2').offset().top
    }, 1000);
                }

 });

});

Answer 1

如果您只调用它，它将正确切换.slideToggle。每次调用.slideUp时，它会在可见时向上滑动，然后立即向下滑动，因为它再次被切换。它第一次向下滑动，因为.slideUp它不可见。

如果要隐藏所有其他元素，可以使用.not排除当前“显示”的元素。

http://jsfiddle.net/fS5gq/3/

Answer 2

试试这个删除$('.newboxes2').slideUp().delay(200);

 $(document).ready(function() {

 $('.showscroll').bind('click', 'h2, h3', function(e) {
   e.preventDefault();

   $(this).toggleClass('active');       
   $(this).find('.newboxes2').slideToggle();

               if($(this).is('.active') ) {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               } else {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               }
   if (this.id === 'service29') {
    $('html, body').animate({
      scrollTop: $(this).find('h2').offset().top
    }, 1000);
                }

 });

});

http://jsfiddle.net/fS5gq/4/