メニュー内でdivを削除しようとしています

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を使用していなかった理由をよく理解していませんでした。

- >http://jsfiddle.net/SQSDq/