Question

我对jquery很新，并尝试尽可能多地学习。最困难的部分是知道应该使用什么。我试图找到合乎逻辑的方法，但大多数时候发现它很困难。

1。我附上了一张描述我第一个问题的图片http://tinypic.com/r/8xka3c/7

2。我的第二个问题是如何避免选择按钮切换？我只是想让它切换当我按下另一个按钮时，恢复正常状态。

我真的很感谢你的帮助！

我的代码：

$(document).ready(function () {
    var $div = $('#test');
    var height = $div.height();
    $div.hide().css({ height : 0 });

$('li#contact').click(function () {
if ($div.is(':visible')) {
    $div.animate({ height: 0 }, { duration: 250, complete: function () {
        $div.hide();
    } });
} else {
    $div.show().animate({ height : height }, { duration: 250 });
}
return false;
    });
});
   $('#nav li').click(function () {
   $('#nav li').not(this).removeClass('active'); 
   $(this).toggleClass('active');
});

Answer 1

首先，点击处理程序中的.toggleClass似乎有点奇怪。你可以试试：

$('#nav li').click(function () {
    $('#nav li').removeClass('active'); 
    $(this).addClass('active');
});

为了帮助您开始对显示/隐藏部分进行故障排除，您可以将相关的点击处理程序减少到：

$('li#contact').click(function () {
    $div.toggle(!$div.is(":visible"));
});

Answer 2

试试这个

$(document).ready(function () {
    var $div = $('#test');
    var height = $div.height();
    $div.hide().css({ height : 0 });

    $('li#contact').click(function () {
         $div.animate({ height: $div.is(':visible')?0:height }, { duration: 250, 
           complete: function (){
            $div.toggle(!$(this).is(":visible"));
           } 
         });
       return false;
    });

   $('#nav li').click(function () {
     $('#nav li').removeClass('active'); 
     $(this).toggleClass('active');
   });
});

Answer 3

也许你想看看这个jsfiddle。我认为这是一种更优雅的方式来实现你想要做的事情。例如，我不太明白为什么你没有使用jQuery函数slideUp / slideDown而不是animate函数。

- ＆GT; http://jsfiddle.net/SQSDq/

试图删除菜单中的div

3 个答案: