JQuery append () не применяется CSS стиль - PullRequest
Новая
       5

JQuery append () не применяется CSS стиль

0 голосов
/ 07 мая 2020

Я искал в inte rnet ответ на этот вопрос, но не могу его понять.

Я пытался создать аккордеон, в который добавляю данные из файла JSON. Когда я добавляю элементы списка, классы не применяются должным образом, поэтому анимация аккордеона больше не работает. Я вижу это, когда проверяю html в консоли. Есть идеи?

Мой индексный файл: 

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <ul class="accordion">

    </ul>
  </body>

</html>

Мой JS файл: 

$(document).ready(function() {
  $.getJSON('file.json', function(data) {
    $.each(data.file, function(index, value) {
      $('.accordion').append(`<li><a class='toggle'>Q: ${value.question}</a>
      <p class='inner'>${value.answer}</p></li>`);
    });
  });

  // Accordion animation

  $('.toggle').click(function(e) {
      e.preventDefault();
    
      let $this = $(this);
    
      if ($this.next().hasClass('show')) {
          $this.next().removeClass('show');
          $this.next().slideUp(350);
      } else {
          $this.parent().parent().find('li .inner').removeClass('show');
          $this.parent().parent().find('li .inner').slideUp(350);
          $this.next().toggleClass('show');
          $this.next().slideToggle(350);
      }
  });
})

Мой CSS: 

* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  width: 40%;
  min-width: 300px;
  max-width: 500px;
  margin: 1.5em auto;
  color: #333;
}

h1 {
  font-weight: 400;
  font-size: 2.5em;
  text-align: center;
  margin-top: 5rem;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul li {
  margin: 0.5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: 0.75em;
  border-radius: 0.15em;
  transition: background 0.3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

Ответы [ 3 ]

1 голос
/ 07 мая 2020

Вам необходимо делегировать событие из ul, поскольку li и a создаются динамически. Замените $('.toggle').click(function(e) { на $('ul').on('click', 'li a.toggle', function(e) {

jsonplaceholder publi c api используется для создания фрагмент стека 

$(document).ready(function() {
  $.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {

    $.each(data, function(index, value) {
      $('.accordion').append(`<li><a class='toggle'>Q: ${value.title}</a>
      <p class='inner'>${value.body}</p></li>`);
    });
  });

  // Accordion animation

  $('ul').on('click', 'li a.toggle', function(e) {
    e.preventDefault();

    let $this = $(this);

    if ($this.next().hasClass('show')) {
      $this.next().removeClass('show');
      $this.next().slideUp(350);
    } else {
      $this.parent().parent().find('li .inner').removeClass('show');
      $this.parent().parent().find('li .inner').slideUp(350);
      $this.next().toggleClass('show');
      $this.next().slideToggle(350);
    }
  });
})
* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  width: 40%;
  min-width: 300px;
  max-width: 500px;
  margin: 1.5em auto;
  color: #333;
}

h1 {
  font-weight: 400;
  font-size: 2.5em;
  text-align: center;
  margin-top: 5rem;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul li {
  margin: 0.5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: 0.75em;
  border-radius: 0.15em;
  transition: background 0.3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">

</ul>

После нажатия кнопки запуска подождите несколько секунд, чтобы полностью загрузить демо

0 голосов
/ 07 мая 2020

Вы можете попробовать добавить "! Important" в конце ваших css свойств. Например: 

ul {
 list-style: none !important;
  padding: 0 !important;
}
0 голосов
/ 07 мая 2020

Когда вы добавляете новый HTML на свою страницу после загрузки страницы, он приходит без каких-либо обработчиков событий. Самый простой способ исправить это - удалить и снова добавить обработчики событий для вашего аккордеона после того, как вы обновите свой HTML. Это можно сделать примерно так: 

$(document).ready(function() {
  $.getJSON('file.json', function(data) {
    $.each(data.file, function(index, value) {
      $('.accordion').append(`<li><a class='toggle'>Q: ${value.question}</a>
      <p class='inner'>${value.answer}</p></li>`);
    });
    
    //remove and add toggle handler again
    $('.toggle').unbind('click');
    addToggleHandler()
  });
  
  addToggleHandler();
});

 
function addToggleHandler(){
  $('.toggle').click(function(e) {
      e.preventDefault();
    
      let $this = $(this);
    
      if ($this.next().hasClass('show')) {
          $this.next().removeClass('show');
          $this.next().slideUp(350);
      } else {
          $this.parent().parent().find('li .inner').removeClass('show');
          $this.parent().parent().find('li .inner').slideUp(350);
          $this.next().toggleClass('show');
          $this.next().slideToggle(350);
      }
  });
}


  
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <ul class="accordion">

    </ul>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...