divのスタイルを特定のクラスに変更しますか？

Question

これは繰り返し質問の場合は本当に申し訳ありません。

＃menudd.showのmax-heightを設定して移行を満足させたいと思います。私はjavascriptでこれをやりたいので、より正確に値を指定することができます。

この私が得たものであり、そのいくつかの理由のために働いていない...

HTML：

<div id="menudd"> 
    <a href="index.html">Home</a> 
    <a href="aboutme.html">About Me</a> 
    <a href="shotterm.html">Short-Term</a> 
    <a href="middleterm.html">Middle-Term</a> 
    <a href="longterm.html">Long-Term</a> 
</div> 

CSS：

#menudd { 
    position: fixed; 
    overflow: hidden; 
    max-height: 0px; 
    opacity: 0; 
    width: 200px; 
    border-radius: 10px; 
    box-shadow: 0 0 35px 15px black; 
    transition: all 1s ease; 
} 

#menudd.show { 
    opacity: 1; 
} 

ではJavaScript：

$("#menudd." + show).get(0).style.maxHeight = document.getElementById("menudd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("menudd").getElementsByTagName("A").length + "px"; 

これは、 "show is noコンソールでは「定義済み」と表示されます。

$（ "＃menudd.show"）。get（0）.style.maxHeightを使用すると、「コンソールで未定義のプロパティ 'style'を読み取れません。

私は$（ "＃menudd.show"）を使用していますが、style.maxHeightは "コンソールの中で" '未定義のmaxHeight'プロパティを読み取れません。

ご協力いただきありがとうございます。おはようございます。 :)

Answer 1

あなたの質問では、div内にクラス "show"を持つ要素を探したかったと言いました。

現在、変数ではなくクラスを探しています。このように変更し、

$("#menudd.show") 

は、最大高さを設定するには：これに

$("#menudd." + show) 

：これを変更

$("#menuadd.show").css({ "maxHeight": document.getElementById("menudd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("menudd").getElementsByTagName("A").length + "px" }); 

Answer 2

まずは、私は読みやすくするためにいくつかのものを追加します - padding: 0.5em;のようにドロップダウンメニューを開きます。また、</a>タグのあとの<br />タグ（最後のタグを除く）。

第2のの場合、ページにはshowの要素がないため、エラーが発生しました。私はドロップダウンの<div>にそれを加えて、それが動作していることを示し、エラーを消し去らせます。

このを忘れないでください：コンソールはそれがundefinedですが言えば、チャンスはどちらかあなたが手紙をスペルミスか、あなたが忘れてしまったとしましょうので、それは真剣に存在しない要素ORを選択する方法で台無しということです（この場合のように）与えられたタグにクラスを追加します。

第3のは、作業状態のコードは以下のとおりです。これは、jQueryの緩和ものが、純粋なJavaScriptを使用していない - jQueryを使って使用することをお勧めしonclickイベントによる場合を除い：

$("#menu-dropdown").on("click", function() { 
 
\t 
 
    var menu_dropdown = document.getElementById("menudd"); 
 
\t var menu_item = menu_dropdown.getElementsByTagName("A"); 
 
    
 
    $("#menudd").toggleClass("show"); 
 

 
\t menu_dropdown.style.maxHeight = menu_item[0].offsetHeight * menu_item.length + "px"; 
 
    
 
    });

#menudd { 
 
    padding: 0.5em; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    max-height: 0px; 
 
    opacity: 0; 
 
    width: 200px; 
 
    border-radius: 10px; 
 
    box-shadow: 0 0 35px 15px black; 
 
    transition: all 1s ease; 
 
} 
 

 
#menudd.show { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<span id="menu-dropdown">DropDown</span> 
 
<div id="menudd"> 
 
    <a href="index.html">Home</a><br /> 
 
    <a href="aboutme.html">About Me</a><br /> 
 
    <a href="shotterm.html">Short-Term</a><br /> 
 
    <a href="middleterm.html">Middle-Term</a><br /> 
 
    <a href="longterm.html">Long-Term</a><br /> 
 
</div>

あなたはthis video（YouTubeの）にも取り組んでそれを見ることができます私は記録した。

第4のでは、クラスを簡単なJavaScriptで簡単に追加できます。私はそれについて完全に書いていないので、敬虔な答えで有名な質問があるのでPeter Boughton既にスタックオーバーフローしています。それを読むhere。とにかく

、単に呼び出し、クラスを追加するには：

document.getElementById("MyElementID").className += " MyClass"; 

スペースに注意することが重要です。値を持つ文字列なので、それを置く必要があります。それ以外の場合は、すべてのクラスを存在しない1つの単語（1つのクラス）として扱います。

削除するには：

document.getElementById("MyElementID").className = document.getElementById("MyElementID").className.replace(/(?:^|\s)MyClass(?!\S)/g , ''); 

ピーターの答えを介して利用可能な説明を。それをそこに読んでください（重要）！最後に

が、これは質問の範囲と単にリマインダーの外にある：私は、これはドロップダウンメニューがある場合、あなたには、いくつかの焦点後showクラスを追加する必要があります（あるいはクリック）することを述べる必要がありますいくつかの種類のマスターメニューの関数を呼び出すことで、私はコードを動作させるように<div>にハードコーディングすることではありません。たとえば、メニューの「Cars Brand」アイテムには、使用可能な車種（Ford,Toyotaなど）のドロップダウンリストが表示されます。

したがって、対象のドロップダウンのIDを受け取る関数を開いて開くことをお勧めします。そして、フォーカスを失った後（または何でも）、それを閉じることを忘れないでください。