JQuery append()不应用CSS风格化。

问题描述 投票：0回答：2

我一直在互联网上搜索这个问题的答案，但无法弄清楚。

我一直在尝试创建一个手风琴，其中我从JSON文件中附加数据。当我追加列表项时，类没有被正确应用，所以手风琴动画不再工作。当我在控制台中检查html时，我可以看到这一点。有什么好办法吗？

我的index文件。

<!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);
}
javascript html jquery css append
2个回答
1
投票

你需要委托事件从 ul 自从 li &amp.是动态创建的。a 是动态创建的 $('.toggle').click(function(e) { 与 $('ul').on('click', 'li a.toggle', function(e) {

jsonplaceholder 公共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
投票

当你在页面加载后添加新的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>
0
投票

你可以尝试在你的css属性的最后添加"!important"，例如：

ul {
 list-style: none !important;
  padding: 0 !important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.