jQuery崩溃在我的模式下不工作
我有一个代码，其中的折叠按它应该的方式工作，但当我在自己的脚本中使用它时，它不起作用，我不知道该去哪里查看。以下是工作代码：jQuery崩溃在我的模式下不工作,jquery,Jquery,我有一个代码，其中的折叠按它应该的方式工作，但当我在自己的脚本中使用它时，它不起作用，我不知道该去哪里查看。以下是工作代码： <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style-test.css">
</head>
<body>
<div id="accordion">
<h3 style="margin-top: 0px;padding-top: 2px;padding-bottom: 2px;font-size: 18px;padding-left: 12px;background-color: whitesmoke;border-bottom: #dfdeda;border-bottom-width: 1px;border-bottom-style: solid;border-top-left-radius: 3px;border-top-right-radius: 3px;margin-bottom: auto;">Adgroup 1</h3>
<div style="padding-bottom: 2px;padding-left: 12px;border: 1px solid rgb(223, 222, 218);border-radius: 3px;padding: 10px;">
<div style="padding-left: 12px;float: left;"> <h4>Keywords:</h4>
Mauris mauris ante, blandit¸<br />
Mauris mauris ante, blandit¸<br />
Mauris mauris ante, blandit¸<br />
</div>
<div id="previewBox1">
<div class="previewBox1">
<div style="margin-top: 0px;padding-left: 12px;padding-top: 2px;padding-bottom: 2px;font-size: 18px;background-color: whitesmoke;border-bottom: #dfdeda;border-bottom-width: 1px;border-bottom-style: solid;border-top-left-radius: 3px;border-top-right-radius: 3px;">Ad1</div>
<div id="headlineText" style="color: #00c;font-size: 14px;text-decoration: underline;padding-left: 12px;">
<span id="headlineText11" >hjgj ghjgjh</span>
<span id="headlineText2101">ghjgjh hjjgjh</span><br />
<img src="ads.jpg" style="float: left;" /><span style="color: #0e8f0e; " id="finalUrlText501">www.example.com</span><span id="path1Text301" style="color: #0e8f0e;">/hjgjghjghj/</span><span id="path2Text401" style="color: #0e8f0e;"tyrtytyytry</span>
</div>
<span id="descriptionText201" style="padding-left: 12px;">rytrytnyytut</span>
</div>
<div class="previewBox1">
<div style="margin-top: 10px;padding-left: 12px;padding-top: 2px;padding-bottom: 2px;font-size: 18px;background-color: whitesmoke;border-bottom: #dfdeda;border-bottom-width: 1px;border-bottom-style: solid;border-top-left-radius: 3px;border-top-right-radius: 3px;">Ad 2</div>
<div id="headlineText" style="color: #00c;font-size: 14px;text-decoration: underline;padding-left: 12px;">
<span id="headlineText11" >hjgj ghjgjh</span>
<span id="headlineText2101">ghjgjh hjjgjh</span><br />
<img src="ads.jpg" style="float: left;" /><span style="color: #0e8f0e; " id="finalUrlText501">www.example.com</span><span id="path1Text301" style="color: #0e8f0e;">/hjgjghjghj/</span><span id="path2Text401" style="color: #0e8f0e;"tyrtytyytry</span>
</div>
<span id="descriptionText201" style="padding-left: 12px;">rytrytnyytut</span>
</div>
</div>
<div id="clear" style="clear:both;"></div>
</div>
<h3 style="margin-top: 0px;padding-top: 2px;padding-bottom: 2px;font-size: 18px;padding-left: 12px;background-color: whitesmoke;border-bottom: #dfdeda;border-bottom-width: 1px;border-bottom-style: solid;border-top-left-radius: 3px;border-top-right-radius: 3px;margin-bottom: auto;">Adgroup 2</h3>
<div style="padding-bottom: 2px;padding-left: 12px;border: 1px solid rgb(223, 222, 218);border-radius: 3px;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>
<h3 style="margin-top: 0px;padding-top: 2px;padding-bottom: 2px;font-size: 18px;padding-left: 12px;background-color: whitesmoke;border-bottom: #dfdeda;border-bottom-width: 1px;border-bottom-style: solid;border-top-left-radius: 3px;border-top-right-radius: 3px;margin-bottom: auto;">Adgroup 3</h3>
<div style="padding-bottom: 2px;padding-left: 12px;border: 1px solid rgb(223, 222, 218);border-radius: 3px;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>
<h3 style="margin-top: 0px;padding-top: 2px;padding-bottom: 2px;font-size: 18px;padding-left: 12px;background-color: whitesmoke;border-bottom: #dfdeda;border-bottom-width: 1px;border-bottom-style: solid;border-top-left-radius: 3px;border-top-right-radius: 3px;margin-bottom: auto;">Adgroup 4</h3>
<div style="padding-bottom: 2px;padding-left: 12px;border: 1px solid rgb(223, 222, 218);border-radius: 3px;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>
</div>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</body>
</html>
广告组1
关键词：
莫里斯·莫里斯·安特，布兰迪特¸
莫里斯·莫里斯·安特，布兰迪特¸
莫里斯·莫里斯·安特，布兰迪特¸
Ad1
hjgj ghjgjh
ghjgjh HJGJH
www.example.com/hjjgjj/除非您是初学者，否则上述代码对于开发人员来说不是很好的实践。你没有调用引导，但你尝试使用它。最好看看引导教程，这对你来说很容易。不要添加肮脏的代码，这会使其他人难以找到实际发生的情况
例如，在调用bootstrap.css和bootstrap.js之后
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Button collapsible</button>
<div id="demo" class="collapse">
//your statements
</div>
按钮可折叠
//你的陈述
实际上很简单在您的代码document.getElementById（“accordion”）.innerHTML=…
$("#accordion").accordion('destroy').accordion();
您可以查看下面的工作样本。在updatehtml
按钮上，单击它将更新您的HTML，然后重置accordio
$（函数（）{
$（“#手风琴”）。手风琴（）；
});
函数setNewHtml（）{
document.getElementById（“手风琴”）.innerHTML='Adgroup 1关键字：Mauris Mauris ante，blandit¸
Mauris Mauris ante，blandit¸
Mauris Mauris ante，blandit¸
ad1hjj ghjghjghjhhjjhjhj
www.example.com/hjjjjjjghjgjgjgjghj/我为混乱的代码感到抱歉。是的，我是一个铁杆初学者。我通常会玩代码和CSS，直到它起作用，然后我再清理它。对不起。我不知道't在测试代码上不使用引导（我文章中的第一个代码）它工作得很好。Bootstrap用于我的Node，我在实际代码中调用它。我刚刚更新了我的答案，Bootstrap非常简单，你可以很容易理解，只需通过它我已经工作了半天，使我的代码工作并以我想要的方式显示。我同意Bootstrap可能更容易，但为了学习，我想知道是什么现在是我实际代码的问题。再次感谢。可能是您正在寻找append（）
jquey函数，请清除您的代码。虽然代码正常，但会弄乱我的css：(
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Button collapsible</button>
<div id="demo" class="collapse">
//your statements
</div>
$("#accordion").accordion('destroy').accordion();