Hide（）ドロップダウンの内容が消えます

Question

私はJavascriptを使い慣れていないので、これは愚かな質問かもしれませんが、私は迷っています。私は、右のリスト項目が選択されたときに、非表示にする/ドロップするようにドロップダウンを試みました。私はW3Schoolsによって提供されるホバードロップダウンを使用しています。私は、彼らが提供してきましたCSSをコピーしたし、私のHTMLとJSは、次のようになります。

<div class="dropdown" id = "menu3"> 
    <button class="dropbtn" id = "menu3btn">Menu 3</button> 
    <div class="dropdown-content" id = "menu3c"> 
     <ul> 
      <li><a id="item30">Cheese</a></li> 
      <li><a id="item31">Pepperoni</a></li> 
      <li><a id="item32">Sausage</a></li> 
     </ul> 
    </div> 
</div> 

そして、JS：ユーザが「ソーセージ」をクリックすると、現在Javascriptがドロップダウンを閉じている

$(document).ready(function(){ 
    $('li').click(function(){ 
     if($(this).text() == "Sausage"){ 
      $(this).parent().parent().hide(); 
     } 
    } 
} 

それは私が望むものです。しかし、もう一度メニューを表示すると、ドロップダウンは表示されず、表示されません。 。私は

$(this).parent().parent().hide(); 

に$（この）.parent（）を非表示（）を変更しようとしました。

と結果は同じです。

私も）（親を置き換えることでdropbtnを切り替えるしようとした非表示（）のコードを持つ：。

var btnName = "#"+$(this).parent().parent().parent().attr("id")+"btn"; 
$(btnName).toggle(); 

これは完全に画面からボタンをクリックし、ドロップダウンメニューを削除しました。

私も自分のJSには、このメソッドを追加することによって、隠されたドロップダウン・コンテンツを表示するにはホバーを強制しようとしました：

$(".dropdown").hover(function() { 
    if($(this).attr("id") == "menu3"){ 
     $("#menu3c").show(); 
    } 
} 

これはどちらか何もしなかった（隠されたコンテンツが隠されとどまりました）。

ご協力いただければ幸いです。

Answer 1

代わりの$(this).parent().parent().hide();、あなたは、もう一度メニューを表示するには、親

$(this).closest('div').hide();

を非表示にする

$('#menu3btn').on('click', function() { 
    $('#menu3c').toggle(); 
});