JQuery append() 不适用 CSS 样式
[英]JQuery append() doesn't apply CSS styling
问题描述
I've been scouring the internet for an answer to this but can't figure it out.
我一直在互联网上寻找答案，但无法弄清楚。
I've been trying to create an accordion, in which I append data from a JSON file.我一直在尝试创建一个手风琴，其中我 append 数据来自 JSON 文件。 When I append the list items, the classes are not properly applied, so the accordion animation no longer works.当我 append 列表项时，类没有正确应用，所以手风琴 animation 不再起作用。 I can see this when I inspect the html in the console.当我在控制台中检查 html 时，我可以看到这一点。 Any ideas?有任何想法吗？
My index file:我的索引文件：
<.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>
My JS file:我的 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); } }); })
My CSS:我的 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
1 已采纳 2020-05-07 16:33:53
You need to delegate the event from ul since li & a are dynamically created Replace $('.toggle').click(function(e) { with $('ul').on('click', 'li a.toggle', function(e) {您需要从ul委托事件，因为li & a是动态创建的 Replace $('.toggle').click(function(e) { with $('ul').on('click', 'li a.toggle', function(e) {
jsonplaceholder public api is used to create stack snippte jsonplaceholder public 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>
After clicking run button wait for few seconds to completely load the demo单击运行按钮后等待几秒钟以完全加载演示
解决方案2
0 2020-05-07 16:34:52
When you add new HTML to your page after the page has loaded, it comes without any event handlers.在页面加载后向页面添加新的 HTML 时，它没有任何事件处理程序。 The easiest way to fix this is to remove and add again the event handlers for your accordion after you have updated your HTML.解决此问题的最简单方法是在更新 HTML 后删除并再次添加手风琴的事件处理程序。 This could be done something like this:这可以这样做：
$(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>
解决方案3
0 2020-05-07 16:38:41
You can try to add ".important" at the final of your your css properties: For example:您可以尝试在 css 属性的最后添加“.important”：例如：
ul {
list-style: none !important;
padding: 0 !important;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.