Javascript 默认情况下隐藏动态生成的按钮_Javascript_Php_Html_Css_Onclick

Javascript 默认情况下隐藏动态生成的按钮

javascript php html css

Javascript 默认情况下隐藏动态生成的按钮,javascript,php,html,css,onclick,Javascript,Php,Html,Css,Onclick,我正在制作一个网页，我拥有的是从我的数据库中获取名称，然后将其制作成按钮。按钮有一个onclick功能，可以正常工作（它隐藏我按下的任何按钮的内容），但是默认情况下所有内容都是可见的，这不是我想要的出于某种原因，“显示：无”对我不起作用。我是不是遗漏了什么 HTML： <h3>Select Class: </h3> <ul> <?php $count = 0;

我正在制作一个网页，我拥有的是从我的数据库中获取名称，然后将其制作成按钮。按钮有一个onclick功能，可以正常工作（它隐藏我按下的任何按钮的内容），但是默认情况下所有内容都是可见的，这不是我想要的

出于某种原因，“显示：无”对我不起作用。我是不是遗漏了什么

HTML：

  <h3>Select Class:  </h3>
    <ul>
            <?php
            $count = 0;
                while($getName = mysqli_fetch_assoc($un)){
                        $name = $record['Name'];
                        $count++;
                        echo "<div id = 'classes'><button class = 'classes' onclick = 'toggleCont($count)'>".$name."</button></div>";
                        echo "<div id = '$count'><div class = 'content'>"DETAILS HERE"</div></div>";
                    }
        ?>
  </ul>

最后，javascript部分：

<body>
<script>

function toggleCont(name){
    var x = document.getElementById(name);
    if (x.style.display == 'none'){
        x.style.display = "block";
    }
    else{
        x.style.display = 'none';
    }
}
</script>

CSS样式规则在JavaScript中应用之前是不可见的。您需要使用以获取规则值：

var style = window.getComputedStyle(x, null).getPropertyValue("display");

if (style == 'none') {
    x.style.display = "block";
} else {
    x.style.display = 'none';
}

    <script>

function toggleCont(name){
    var x = document.getElementById(name);
    var style = window.getComputedStyle(x, null).getPropertyValue("display");
    if (style == 'none') {
        x.style.display = "block";
    } else {
        x.style.display = 'none';
    }
    }
</script> 
    <?php
            $count = 0;
                while($record = mysqli_fetch_assoc($un)){
                        $count++;
                        $class = 'content'.$count;
                        echo "<div class = 'btnclasses'><button class = 'classes' onclick = 'toggleCont($class)'>".$record['un']."</button></div>";
                        echo "<div id = '$class' class = 'content'>".$record['un']."</div>";
                    }
        ?>

    .btnclasses{
  padding: 20px;
  margin-top: 20px;
  width: auto;
  height: 10%;
  background-color:#d3dded;
  overflow: hidden;
}

.classes {
  padding: 20px;
  border: none;
  width: 100%;
  background-color:#d3dded;
}

.content{
  width: auto;
  background-color: grey;
  height: 25%;
  display: none;
}

var style = window.getComputedStyle(x, null).getPropertyValue("display");

if (style == 'none') {
    x.style.display = "block";
} else {
    x.style.display = 'none';
}