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建立，最初为所有隐藏类设置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>

如果您想在点击后消失主页按钮，请设置display：none;对于#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 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

只需使用js添加类。在你的CSS中，

.db{
display: block;
}

在你的js jQuery库中，

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

使用JavaScript或CSS显示隐藏按钮

3 个答案: