Fatal编程技术网
  • javascript/
  • 手风琴文本效果在使用JavaScript的简单html页面中不起作用

手风琴文本效果在使用JavaScript的简单html页面中不起作用

javascript css html

手风琴文本效果在使用JavaScript的简单html页面中不起作用,javascript,css,html,accordion,Javascript,Css,Html,Accordion,我试图实现这一点，但它不起作用…我找不到原因…如果我用相同的代码（复制和粘贴）创建一个简单的html页面，它就起作用了，但是如果我尝试用以前的内容（一个简单的html菜单和一些JavaScript变量）在另一个html页面上实现这种手风琴效果，当我点击按钮时…没有任何变化！！所以…效果不起作用…我找不到原因 这是我的密码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont

我试图实现这一点，但它不起作用…我找不到原因…如果我用相同的代码（复制和粘贴）创建一个简单的html页面，它就起作用了，但是如果我尝试用以前的内容（一个简单的html菜单和一些JavaScript变量）在另一个html页面上实现这种手风琴效果，当我点击按钮时…没有任何变化！！所以…效果不起作用…我找不到原因

这是我的密码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/accordion.css" type="text/css" media="screen">


<script>

var textRecovered = localStorage.getItem("storedText");
var lines = textRecovered.split("\n");
window.localStorage.clear();
for (var i = 0; i < lines.length; i++) {
    console.log(lines[i]);
}

var acc = document.getElementsByClassName("accordion");

for (var j = 0; j < acc.length; j++) {
    acc[j].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}
</script>

</head>
<body>

    <div id="mainArea"> 
            <button class="accordion">Section 1</button>
            <div class="panelacc">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <button class="accordion">Section 2</button>
            <div class="panelacc">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <button class="accordion">Section 3</button>
            <div id="foo" class="panelacc">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
    </div>

    <!-- MENU -->
    <div class="container">
            <ul id="nav">
                <li><a href="#"><img src="images/t1.png" /> Dashboard</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />Reporting</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="llog.html"><img src="images/empty.gif" />LYNIS LOG</a></li>
                        <li><a href="#"><img src="images/empty.gif" />LYNIS REPORT</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />Lynis Tests</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="images/empty.gif" />Accounting</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Authentication</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Banner</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Boot</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Crypto</a></li>
                        <li><a href="#"><img src="images/empty.gif" />File Integrity</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Firewall</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Hardening</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Kernel</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Logging</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Mail</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Malware</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Nameservers</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Networking</a></li>
                        <li><a href="#"><img src="images/empty.gif" />PHP</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Printing</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Processes</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Shell</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Software</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Squid</a></li>
                        <li><a href="#"><img src="images/empty.gif" />SSH</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Storage</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Time</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Tooling</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Web</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="images/t2.png" />Overview</a></li>
            </ul>
    </div>
    <!-- END MENU -->
</body>
</html>
提前感谢

我将您的代码放在window.onload事件中

window.onload = function () {
    var acc = document.getElementsByClassName( "accordion" );

    for ( var j = 0; j < acc.length; j++ ) {
        acc[j].onclick = function () {
            this.classList.toggle( "active" );
            this.nextElementSibling.classList.toggle( "show" );
        }
    }
}

window.onload=函数（）{
var acc=document.getElementsByClassName（“accordion”）；
对于（var j=0；j
手风琴功能似乎工作正常。我只是添加了一些css使文本变黑，结果就是这样

div.panelacc.show p {
   color: black;
}

看起来
主体
标记上的css将所有文本变为白色。只需要覆盖它。

将
内容放入
区域就是解决方案。

伙计，我在var textRecovered=localStorage.getItem（“storedText”）上收到一个脚本错误；var line=textRecovered.split（“\n”）；localStorage不包含storedText尝试尽可能缩小范围，发布您的整个页面对我们许多试图调试您的代码的人来说并不是很鼓励…您可以忽略这一部分：
var textRecovered=localStorage.getItem（“storedText”）；var line=textRecovered.split（“\n”）；window.localStorage.clear（）；对于（var i=0；i
如果你想删除它，仍然无法运行…@webeno你是对的，但我不知道如何更具体一些，我有点紧张，因为如果我只是从w3schools复制和粘贴，它运行得很好：（我尝试了你的代码，但…仍然存在相同的问题：（这很奇怪……它在JSFIDLE上运行得很好，但在我的计算机上不工作……检查浏览器开发人员控制台，确保没有任何JavaScript错误。完成！没有发现任何错误……有东西阻止了JavaScript的运行。我会注释掉所有js，除了手风琴需要的东西，然后慢慢取消注释peices t。）o找出问题的原因。我不知道确切原因，但将
部分放在
中是解决方法。。。 
div.panelacc.show p {
   color: black;
}