JavaScriptを使用したサブメニューの切り替え（表示/非表示）

Question

私はjQueryを使用できないサイトを開発しています（どうかいいことはありません、禁止されています）、.toggle（）クラスを使ってdivを表示/非表示にするだけです。

矢印の付いたボックスのグループがあります。この矢印はサブメニューを展開できます。例を見てみましょう：

<div class="box"> 
    <div class="box-utils"> 
     <a href="#" class="up">&nbsp;</a> 
    </div> 

    <h2>Example case</h2> 

    <div class="box-submenu hidden"> 
     <ul /> 
    </div> 
</div> 

私はそれが箱-サブメニュークラスを非表示/ <div class="box-utils" />番組内<a />をクリックする必要があります。隠されている場合、<a />にはclass = "down"が必要です。隠されていない場合は、class = "up"にする必要があります。これは、同じページ内の複数のケースでも動作する必要があります。

誰かが私を助けることができますか？

ありがとうございます！

Answer 1

以下のようなトグル機能を作成し、DIVのID属性（ボックスサブメニューなど）を提供し、アンカーから関数を呼び出し、そのIDを使用して非表示/表示する項目を検索します。

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("box-submenu"); 
    var link = document.getElementById("linkId"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     link.className = "down"; 
    } 
    else { 
     ele.style.display = "block"; 
     link.className = "up"; 
    } 
} 
</script>