Javascript 有条件工作的按钮_Javascript_Html

Javascript 有条件工作的按钮

javascript html

Javascript 有条件工作的按钮,javascript,html,Javascript,Html,var coll=document.getElementsByClassName（“可折叠”）； var-p；对于（p=0；p

var coll=document.getElementsByClassName（“可折叠”）；
var-p；
对于（p=0；p



卑微的开端（1908-1944）
内容
最简单的概念是，单击按钮后，始终检查目标是否已打开，如果已打开，则返回。由于上面有容易出错且不完整的代码，下面是一个解决问题的尝试
<html>
    <head>
        <script>
            function toggleContent(o) {
                var contents = document.querySelectorAll(".collapsible .content");
                for (var i=0; i<contents.length; i++) {
                    contents[i].style.display = 'none';
                }
                document.getElementById(o.dataset.target).style.display = 'block';
            }
        </script>
    </head>
    <body>
        <div class="collapsible">
            <button data-target="humble1" onclick="toggleContent(this)">1. The Humble Beginning (1908-1944)</button>
            <button data-target="humble2" onclick="toggleContent(this)">2. The Humble Middle (1908-1944)</button>
            <button data-target="humble3" onclick="toggleContent(this)">3. The Humble Ending (1908-1944)</button>
            <div class="content" id="humble1">content 1</div>
            <div class="content" id="humble2" style="display:none">content 2</div>
            <div class="content" id="humble3" style="display:none">content 3</div>
        </div>
    </body>
</html>


功能切换内容（o）{
var contents=document.queryselectoral（“.collapsable.content”）；
对于（var i=0；i我不知道问题是什么，但我认为这就是你想要的

函数a（）{
var div=document.getElementById（“div”）；
var button=document.getElementById（“按钮”）；
如果（div.style.visibility==“可见”）{
div.style.visibility=“隐藏”；
button.innerHTML=“打开”；
}
否则{
div.style.visibility=“可见”；
button.innerHTML=“关闭”；
}
}

一些内容
打开
这种方法更接近您现有的代码。也许它能让您更深入地了解代码中实际发生了什么
一切取决于你：）
1st：
humble2 div在HTML中被破坏，因为它没有结束标记。
首先解决这个问题
第二个：
最好的做法不是通过JS更改内容高度，而是使用表示折叠或扩展状态的类
.collapsed {
    height:0;
}

现在您可以询问content div的状态
if (content.classList.contains('collapsed') == 1){
  content.classList.add('collapsed');
} else {
  content.classList.remove('collapsed');
}

注1：
我会选择height
而不是maxHeight，以防止以后出现其他奇怪的行为。
只有在有充分理由的情况下才可以使用maxHeight

注2：
为内容分区提供一个ID，以便于选择，而不是使用this.nextelementsilling。
目前，您永远无法在HTML DOM上更改某些内容，而不会导致代码失败，因为下一个错误已经更改
注3：
如果您想保持高度概念：
您的if（content.style.maxHeight）{}
将始终返回true，因为它返回一个从不为空的字符串。
即使maxHeight
为0像素，它也会返回'0px'
，这不是一个空字符串，并且为true

但是您已经发现这不符合预期。因此您将maxHeight
设置为null
，这将导致false

最好这样做：
（content.style.maxHeight='0px'）{…}
以及：
content.style.maxHeight='0px'；

通过这种方式，您可以始终使用字符串类型并防止意外行为
在这里，您可以找到更多关于javascript中真实和虚假概念的信息：
不要使用。单击（）
触发折叠。改为切换CSS类。使用按钮上的disabled
属性启用/禁用它。