Не приводится в действие код JavaSript для эффекта текста 'аккордеона' в документе html

Я пробую осуществлять эффект текста 'аккордеон' в документе html, но оно не функционирует, что-то блокирует событие и я все еще не знаю что.

Если я копирую и прикрепляю код примера отсюда в документе html в мишени, функционируй совсем верно..., но если я пробую интегрировать этот код в мой документ, кликнув в кнопке не desplega.

Логика - следующая: Дай страницы A я храню переменную storedText используя localStorage, на странице B я возвращаю стоимость этой переменной (array текста) и вновь имею это в хранившемся array. То, что я хочу сделать, состоит в том, чтобы показывать этот текст, вернувший в форме списка используя эффект аккордеон, чтобы организовывать лучше текст, но эффект аккордеон я не функционирует... даже никакой код язык сценариев JavaScript.

Используя язык сценариев JavaScript внутри самого документа HTML я функционирует какая-то вещь, но не совсем рядом... уже я протестировал несколько альтернатив, но не добиваюсь того, чтобы оно функционировало совсем.

код страницы B:








 





    
    

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.

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.

Код javascript:

/*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 here','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

И весь css, который присоединен с документами (рядом):

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

1
задан 15.04.2016, 19:15
1 ответ

Я смог ответить проблему копируя код в помещении (оно не функционирует в SO, потому что код - sandboxed и localStorage оно не функционирует).

Ошибка находится в первой / второй линии кода язык сценариев JavaScript. Ты читаешь стоимость localStorage, но не подтверждаешь, существует ли или нет он. Если он существует, совершенный; но если стоимость не существует, тогда split он не удастся... и язык сценариев JavaScript прекратит работать, потому что браузеры прекращают выполнять код, когда они находят неудачу, и тогда не будет работать часть, связанная с аккордеоном.

Решение простое: перед тем, как не делать никакой операции со стоимостью localStorage, убедись в том, что он существует, для этого добавь простое условие:

if (localStorage.getItem("storedText")) {
    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]);
    }
}

Как только я сделал это изменение (оставшаяся часть кода остается равной), аккордеон функционировал без проблем в моем помещении.

0
ответ дан 24.11.2019, 14:35
  • 1
    Схвати и # 237; он, уже sab и # 237; в меня, что говорилось об абсурдной ошибке новичка... в каких-то зонах c и # 243; я говорю, например, внутри body, я шли некие части c и # 243; я говорю JS, другие не... Решенная тема, much и # 237; пропасти спасибо. – Gera 16.04.2016, 14:12

Теги

Похожие вопросы