jQuery Collapse无法在我的模式中运行

时间：2018-07-12 04:06:09

标签： 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.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>

在我的脚本中，我向我的模态添加了折叠代码：

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Your Campaign Preview</h4>
        </div>
       <div class="modal-body">
          <div id="accordion"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

使用此代码：

document.getElementById("accordion").innerHTML = '<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 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>';

内容已很好地插入，但是div扩展了而不是第一个扩展了，而其他折叠了。 我做错了什么，但我不知道那是什么。我已经将jQuery-ui CDN添加到标题中，并将function（）也添加到了我的代码中。

请帮助我。

谢谢

2 个答案:

答案 0 :(得分：1)

除非您是初学者，否则上述代码对开发人员而言不是好的习惯。您没有调用引导程序，但是尝试使用它。最好看一下引导教程，它Bootstrap collapse对您来说很容易。不要添加肮脏的代码，这会使其他人很难找到实际发生的情况。

例如，在调用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>

实际上很简单

答案 1 :(得分：0)

在代码document.getElementById("accordion").innerHTML = ...之后添加以下行

$("#accordion").accordion('destroy').accordion();

您可以在下面查看工作示例。在Update HTML按钮上单击，它将更新您的html，然后重置accordion。

$(function() {
  $("#accordion").accordion();
});

function setNewHtml() {
  document.getElementById("accordion").innerHTML = '<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 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>';



  $("#accordion").accordion('destroy').accordion();
}
<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">

<button onclick="setNewHtml()"> Update HTML </button>

<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>

相关问题
最新问题