【问题标题】：JQuery append() doesn't apply CSS stylingJQuery append() 不应用 CSS 样式
【发布时间】：2020-08-23 01:07:21
【问题描述】：
我一直在互联网上寻找答案，但无法弄清楚。
我一直在尝试创建一个手风琴，在其中添加来自 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);
}
【问题讨论】：
标签：
javascript
html
jquery
css
append
【解决方案1】：
您需要从ul 委托事件，因为li 和a 是动态创建的
将$('.toggle').click(function(e) { 替换为$('ul').on('click', 'li a.toggle', function(e) {
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>
点击运行按钮后等待几秒钟以完全加载演示
【解决方案2】：
当您在页面加载后向页面添加新 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>
【解决方案3】：
您可以尝试在您的 css 属性的最后添加“！important”。
例如：
ul {
list-style: none !important;
padding: 0 !important;
}