当我尝试添加文本效果时，有东西阻止了JavaScript的运行；手风琴'；在html文档中_Javascript_Css_Html

当我尝试添加文本效果时，有东西阻止了JavaScript的运行；手风琴'；在html文档中
javascript css html
当我尝试添加文本效果时，有东西阻止了JavaScript的运行；手风琴'；在html文档中,javascript,css,html,Javascript,Css,Html,我正在尝试实现，但它不起作用……有些东西正在“阻止”JavaScript代码……如果我用相同的代码创建一个简单的html页面（复制和粘贴），它会起作用，但如果我尝试将这种手风琴效果实现到另一个包含以前内容的html页面（一个简单的html菜单和一些JavaScript变量）。当我点击按钮时…没有任何变化，之前的JavaScript代码也不起作用…所以如果我混合所有JavaScript代码，没有任何效果，但我不知道为什么如果您尝试执行代码，可能会因为以下行而出现错误： var textRecov
我正在尝试实现，但它不起作用……有些东西正在“阻止”JavaScript代码……如果我用相同的代码创建一个简单的html页面（复制和粘贴），它会起作用，但如果我尝试将这种手风琴效果实现到另一个包含以前内容的html页面（一个简单的html菜单和一些JavaScript变量）。当我点击按钮时…没有任何变化，之前的JavaScript代码也不起作用…所以如果我混合所有JavaScript代码，没有任何效果，但我不知道为什么
如果您尝试执行代码，可能会因为以下行而出现错误：
var textRecovered=localStorage.getItem（“storedText”）它在我的机器上工作，但您的本地存储上没有变量storedText，因此您可以跳过它。但我不知道我是否把它和手风琴混合在一起，JavaScript效果会停止工作
逻辑（目标）如下：从A页开始，我使用localStorage在B页存储storedText
变量。然后我恢复该变量（文本数组）的值。我想做的是使用手风琴效果将文本显示为列表，以更好地组织文本，但是手风琴效果或任何JavaScript代码都不起作用
也许我应该考虑使用jQuery或JavaScript函数…我迷路了
页面“B”代码：
<!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 src="myscripts.js"></script> 



</head>
<body>
    <!--Añadimos al area principal el efecto acordeon con el texto -->
    <div id="mainArea"> 
            <button class="accordion">Section 1</button>
            <div id="placeholder" class="panelacc"></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>

/*Recuperamos la variable almacenada en local storage y una vez guardado en una variable vaciamos el contenido de localstorage */
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]);
}

/* Script que nos permite gestionar los eventos para el texto en forma de acordeon */


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");
    }
}

// selects the div with an id of placeholder
var div = document.getElementById('placeholder');


var fruits = ['I want a link <a href="http://google.com">here</a>','I want a link here','I want a link here','I want a link here','I want a link here'],
    ul = document.createElement('ul'); // create an arbitrary ul element

// loop through the fruits array
for(var i in fruits) {
        // create an arbitrary li element
    var li = document.createElement('li'),
         content = document.createTextNode(fruits[i]); // create a textnode to the document
         var link = "http://google.com";
         var element = document.createElement("span");
         element.innerHTML = fruits[i];
  li.appendChild(element); // append the created textnode above to the li element
  ul.appendChild(li); // append the created li element above to the ul element
}
div.appendChild(ul); // finally the ul element to the div with an id of placeholder

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panelacc {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panelacc.show {
    opacity: 1;
    max-height: 500px;  
}

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

*{
    margin:0;
    padding:0;
}

body {
    background-color:#bababa;
}

div#fileOutput{
    margin: auto;
    margin-top: 50px;
    margin-left: 250px;
    margin-right: 50px;
    margin-bottom: 50px;
    width: 960px;
    height: 800px;
    white-space: pre-line;
    border: solid 1px black;
    padding: 5px;
}

input[type="file"]{
    margin: auto;
    width: 960px;
    height: 50px;
    margin-left: 250px;
    white-space: pre-line;
    border: solid 1px black;
    padding: 5px;

}


div#mainArea{
    margin: auto;
    margin-top: 50px;
    margin-left: 250px;
    margin-right: 50px;
    margin-bottom: 50px;
    width: 960px;
    height: 800px;
    white-space: pre-line;
    border: solid 1px black;
    padding: 5px;
}

#nav {
    border:3px solid #3e4547;
    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    position: fixed;
    top: 0; left: 0;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover li {
    margin-top:0;
}

这是因为如果JavaScript无法处理在脚本之前加载的html。在所有内容之后，将整个脚本标记放在
末尾附近，而不是将其放在
中，它应该可以工作
    </div>
    <!-- END MENU -->
<script src="myscripts.js"></script> 
</body>
</html>

但将js放在html文件的末尾被认为是一种常见的好做法
整个html和js供参考：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">

</head>
<body>
    <!--Añadimos al area principal el efecto acordeon con el texto -->
    <div id="mainArea"> 
            <button class="accordion">Section 1</button>
            <div id="placeholder" class="panelacc"></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="" /> Dashboard</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="" />Reporting</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="llog.html"><img src="" />LYNIS LOG</a></li>
                        <li><a href="#"><img src="" />LYNIS REPORT</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="" />Lynis Tests</a><img src="" alt="" />
                    <ul>
                        <li><a href="#"><img src="" />Accounting</a></li>
                        <li><a href="#"><img src="" />Authentication</a></li>
                        <li><a href="#"><img src="" />Banner</a></li>
                        <li><a href="#"><img src="" />Boot</a></li>
                        <li><a href="#"><img src="" />Crypto</a></li>
                        <li><a href="#"><img src="" />File Integrity</a></li>
                        <li><a href="#"><img src="" />Firewall</a></li>
                        <li><a href="#"><img src="" />Hardening</a></li>
                        <li><a href="#"><img src="" />Kernel</a></li>
                        <li><a href="#"><img src="" />Logging</a></li>
                        <li><a href="#"><img src="" />Mail</a></li>
                        <li><a href="#"><img src="" />Malware</a></li>
                        <li><a href="#"><img src="" />Nameservers</a></li>
                        <li><a href="#"><img src="" />Networking</a></li>
                        <li><a href="#"><img src="" />PHP</a></li>  
                        <li><a href="#"><img src="" />Printing</a></li>
                        <li><a href="#"><img src="" />Processes</a></li>
                        <li><a href="#"><img src="" />Shell</a></li>
                        <li><a href="#"><img src="" />Software</a></li>
                        <li><a href="#"><img src="" />Squid</a></li>
                        <li><a href="#"><img src="" />SSH</a></li>
                        <li><a href="#"><img src="" />Storage</a></li>
                        <li><a href="#"><img src="" />Time</a></li>
                        <li><a href="#"><img src="" />Tooling</a></li>
                        <li><a href="#"><img src="" />Web</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="images/t2.png" />Overview</a></li>
            </ul>
    </div>
    <!-- END MENU -->
<script src="script.js"></script> 
</body>
</html>


第一节
第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作








































JS代码：
var textRecovered = localStorage.getItem("storedText");

if (textRecovered !== null){
    var lines = textRecovered.split("\n");
    window.localStorage.clear();
    for (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");
    }
}

// selects the div with an id of placeholder
var div = document.getElementById('placeholder');


var fruits = ['I want a link <a href="http://google.com">here</a>','I want a link here','I want a link here','I want a link here','I want a link here'],
    ul = document.createElement('ul'); // create an arbitrary ul element

// loop through the fruits array
for(var i in fruits) {
        // create an arbitrary li element
    var li = document.createElement('li'),
         content = document.createTextNode(fruits[i]); // create a textnode to the document
         var link = "http://google.com";
         var element = document.createElement("span");
         element.innerHTML = fruits[i];
  li.appendChild(element); // append the created textnode above to the li element
  ul.appendChild(li); // append the created li element above to the ul element
}
div.appendChild(ul); // finally the ul element to the div with an id of placeholder

var textRecovered=localStorage.getItem（“storedText”）；
如果（textRecovered！==null）{
var line=textRecovered.split（“\n”）；
window.localStorage.clear（）；
对于（i=0；i
一个快速猜测，您是否尝试过将您的代码放在body标签的末尾之前？这可能是在加载html之前执行JS的问题。@IdeaMan没错，如果我将localStorage
部分放在主体中，它就可以工作，但其余部分就不行了……为什么？事实上，我希望所有的JS代码都在同一个位置（一个.JS文件）为什么不可能？好吧，我下载了你的代码，现在我正试图理解什么是错误的好吧，这很奇怪。负责本地存储的代码片段破坏了一切。如果删除，代码就可以正常工作。@IdeaMan这很奇怪……我的情况正好相反……本地存储正常，但其他代码工作不正常。它不工作。。。localStorage部分在body标记内部工作，但accordion JavaScript在内部不工作…只在外部工作！为什么？我不明白逻辑。。。我希望所有JavaScript代码都放在一起，而不是dif中的小
var textRecovered = localStorage.getItem("storedText");

if (textRecovered !== null){
    var lines = textRecovered.split("\n");
    window.localStorage.clear();
    for (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");
    }
}

// selects the div with an id of placeholder
var div = document.getElementById('placeholder');


var fruits = ['I want a link <a href="http://google.com">here</a>','I want a link here','I want a link here','I want a link here','I want a link here'],
    ul = document.createElement('ul'); // create an arbitrary ul element

// loop through the fruits array
for(var i in fruits) {
        // create an arbitrary li element
    var li = document.createElement('li'),
         content = document.createTextNode(fruits[i]); // create a textnode to the document
         var link = "http://google.com";
         var element = document.createElement("span");
         element.innerHTML = fruits[i];
  li.appendChild(element); // append the created textnode above to the li element
  ul.appendChild(li); // append the created li element above to the ul element
}
div.appendChild(ul); // finally the ul element to the div with an id of placeholder