JavaScriptまたはCSSを使用して隠しボタンを表示

Question

私は一からページテーマを作成しました。私は、クライアントがホームボタンをクリックした場合に何がしたいこと、それは隠しボタンが表示されるはずです

-New york (hidden) 
-Florida.(hidden) 
-Miami. (hidden) 

私のページでは（ページに表示される）この

ホームのようなものを一つのメインボタンと三つのサブボタンがあります。

どうすれば実現できますか？

<code> 
<script> 
$(document).ready(function(){ 

    $("#home_btn").click(function(){ 
     $("#hidden").show(); 

    }); 
}); 
</script> 



<button onClick = "this.style.visibility= 'hidden';" id="home_btn">home</button> 

<div id="hidden"> 
<button>Newyork</button> 
<button>Florida</button> 
<button>Miami</button> 
</div> 


#hidden{ 
    display: none; 
} 

</code> 

Answer 1

ちょうどJSを使用してクラスを追加します。

があなたのサポートありがとうございました、私は解決策が見つかりました。あなたのCSSの 、jQueryライブラリを使用してJSで

.db{ 
display: block; 
} 

、

$(".yourSelector").addClass("db"); 

Answer 2

JSを使用して、最初にすべての隠されたクラスに対して display:none;を設定し、JSを使用して、ホームボタンのクリックで display:block;を設定することをあなたが確立することができ

。

document.getElementById("home_btn").addEventListener("click",function(){ 
 
    var hidden = document.getElementsByClassName("hidden"); 
 
    for(i =0;i < hidden.length ; i++){ 
 
     hidden[i].style.display = "block"; 
 
    } 
 
})

.hidden{ 
 
    display:none; 
 
    }

<button id="home_btn">home</button> 
 
<button class="hidden">Newyork</button> 
 
<button class="hidden">Florida</button> 
 
<button class="hidden">Miami</button>

あなたがクリックした後、ホームボタンを消えるしたい場合は、表示設定：なし。クリックすると#home_btnが表示されます。下のスニペットを追加しました。ドロップダウンメニューのような

document.getElementById("home_btn").addEventListener("click",function(){ 
 
    document.getElementById("home_btn").style.display = "none"; 
 
    var hidden = document.getElementsByClassName("hidden"); 
 
    for(i =0;i < hidden.length ; i++){ 
 
     hidden[i].style.display = "block"; 
 
    } 
 
})

.hidden{ 
 
    display:none; 
 
    }

<button id="home_btn">home</button> 
 
<button class="hidden">Newyork</button> 
 
<button class="hidden">Florida</button> 
 
<button class="hidden">Miami</button>

Answer 3

$(function(){ 
 
$("#home").click(function() { 
 
    $("#NewYork").show(); 
 
    $("#Florida").show(); 
 
    $("#Miami").show(); 
 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="home">home</button> 
 
    <button id="NewYork" hidden>1</button> 
 
    <button id="Florida" hidden>2</button> 
 
    <button id="Miami" hidden>3</button>