Question

我有一个demo here脚本，允许我在我的网站上显示和隐藏内容。它工作得很好。

然而，当我点击链接以显示内容然后再次点击它以隐藏它时，它会重新打开它。我需要它在展示时点击时完全隐藏（'活跃的'）状态。

任何人都可以解释如何解决这个问题吗？

谢谢。

CODE：

$(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/

使用jQuery隐藏div onClick

2 个答案: