Javascript 首次启动时，故障排除按钮需要双击才能工作_Javascript_Jquery_Html_Css

Javascript 首次启动时，故障排除按钮需要双击才能工作

javascript jquery html css

Javascript 首次启动时，故障排除按钮需要双击才能工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经做了这个代码，当你点击一个按钮时隐藏或显示部分文本。但是，当您第一次启动页面时，您需要单击按钮两次才能使其工作。只有当你第一次尝试启动页面时，因为一旦你点击了两次，你只需要像平常一样每次点击一次。有人知道为什么会这样吗这是我的密码： #myDIV{ 宽度：200px；背景色：#333；颜色：#fff；显示：无；填充：0；保证金：0； } #myDIV2{ 宽度：200px；背景色：#333；颜色：#fff；显示：无； } #箭{ 高度：10px；宽度：10px； }

我已经做了这个代码，当你点击一个按钮时隐藏或显示部分文本。但是，当您第一次启动页面时，您需要单击按钮两次才能使其工作。只有当你第一次尝试启动页面时，因为一旦你点击了两次，你只需要像平常一样每次点击一次。有人知道为什么会这样吗

这是我的密码：

#myDIV{
宽度：200px；
背景色：#333；
颜色：#fff；
显示：无；
填充：0；
保证金：0；
}
#myDIV2{
宽度：200px；
背景色：#333；
颜色：#fff；
显示：无；
}
#箭{
高度：10px；
宽度：10px；
}
#嗯{
高度：20px；
宽度：20px；
}
#钮扣{
背景色：#333；
颜色：#fff；
宽度：250px；
空单元格：隐藏；
}
表，tr，td{
边框：2件纯黑；
边界塌陷：塌陷；
}


幻灯片复选框
函数myFunction（）{
var x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
} 
否则{
x、 style.display=“无”；
}
};
函数myFunction2（）{
var x=document.getElementById（“myDIV2”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
} 
否则{
x、 style.display=“无”；
}
};
普雷米埃·李斯特：

第1项
2名称项目
3eme项目

Deuxième liste：

第1项
2名称项目
3eme项目


幻灯片复选框
普雷米埃·李斯特：

第1项
2名称项目
3eme项目

Deuxième liste：

第1项
2名称项目
3eme项目

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
} 
否则{
x、 style.display=“无”；
}
}
函数myFunction2（）{
var x=document.getElementById（“myDIV2”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
} 
否则{
x、 style.display=“无”；
}
};

我交换了if语句来解决这个问题

函数myFunction（e）{
var x=document.getElementById（“myDIV”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}
函数myFunction2（）{
var x=document.getElementById（“myDIV2”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

#myDIV{
宽度：200px；
背景色：#333；
颜色：#fff；
填充：0；
保证金：0；
显示：无；
}
#myDIV2{
宽度：200px；
背景色：#333；
颜色：#fff；
显示：无；
}
#箭{
高度：10px；
宽度：10px；
}
#嗯{
高度：20px；
宽度：20px；
}
#钮扣{
背景色：#333；
颜色：#fff；
宽度：250px；
空单元格：隐藏；
}
表，tr，td{
边框：2件纯黑；
边界塌陷：塌陷；
}


普雷米埃·李斯特：

第1项
2名称项目
3eme项目

Deuxième liste：

第1项
2名称项目
3eme项目

第一次单击时，myDiv样式的if条件失败。我向标记添加了一个显式样式属性，现在它运行得非常好

对于第一个按钮，两个控制台都按预期记录。对于第二个，if条件不执行

注意：我只是在其中一个div中添加了style属性来澄清差异

enter code here

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Slides Checkbox</title>
        <link rel="stylesheet" href="sample.css">
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

        <script>    
            function myFunction() {
                var x = document.getElementById("myDIV");
                console.log("1", x.style.display);
                if (x.style.display === "none") {
                    console.log("2");
                    x.style.display = "block";
                } 
                else {
                    x.style.display = "none";
                }
            };
            function myFunction2() {
                var x = document.getElementById("myDIV2");
                console.log("3", x.style.display);
                if (x.style.display === "none") {
                    console.log("4");
                    x.style.display = "block";
                } 
                else {
                    x.style.display = "none";
                }
            };
        </script>
    </head>
    <body>
        <table id="button">
            <tr>
                <td><button onclick="myFunction()"><img src="img/arrow.png" id="arrow"></button>
                Première liste:</td>
            </tr>
            <tr>
                <td><div id="myDIV" style="display: none;">
                    <ul>
                        <li>1er item</li>
                        <li>2eme item</li>
                        <li>3eme item</li>
                    </ul>
                </div></td>
            </tr>
            <tr>
                <td><button onclick="myFunction2()"><img src="img/arrow.png" id="arrow"></button>
                Deuxième liste:</td>
            </tr>
            <tr>
                <td><div id="myDIV2">
                    <ul>
                        <li>1er item</li>
                        <li>2eme item</li>
                        <li>3eme item</li>
                    </ul>
                </div></td>
            </tr>
        </table>
        <img src="img/ok.png" id="ok">
    </body>
</html>

在此处输入代码
幻灯片复选框
函数myFunction（）{
var x=document.getElementById（“myDIV”）；
console.log（“1”，x.style.display）；
如果（x.style.display==“无”）{
控制台日志（“2”）；
x、 style.display=“block”；
} 
否则{
x、 style.display=“无”；
}
};
函数myFunction2（）{
var x=document.getElementById（“myDIV2”）；
console.log（“3”，x.style.display）；
如果（x.style.display==“无”）{
控制台日志（“4”）；
x、 style.display=“block”；
} 
否则{
x、 style.display=“无”；
}
};
普雷米埃·李斯特：

第1项
2名称项目
3eme项目

Deuxième liste：

第1项
2名称项目
3eme项目

var x = document.getElementById("myDIV");
if (x.style.display === "none") {
    x.style.display = "block";
} 
    else {
   x.style.display = "none";
}

if (window.getComputedStyle(x).getPropertyValue("display") == "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }