Question

我添加了一个附加手风琴的按钮，但问题是它们似乎无法正常工作。我不知道如何解决这个问题。如果accordion html在document.ready（）之后追加，而不是手风琴不起作用。有人可以帮我解决这个问题吗？

＆＃13;

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script>
        $(document).ready(function() {
          $("#insertAcc").click(function() {
            $("#TheDiv").append('<ul id="MainAcc1" class="accordion"> <li class="open"> <div class="link"> <i id="CloseMainAcc" class="glyphicon glyphicon-remove GlyphiconRemove"></i> Heading Number 1 <i class="fa fa-chevron-down"></i> </div> <div class="submenu"> <p>Body</p> </div> </li> </ul>');
          });

          $(function() {
            var Accordion = function(el, multiple) {
              this.el = el || {};
              this.multiple = multiple || true;

              var links = this.el.find('.link');
              links.on('click', {
                el: this.el,
                multiple: this.multiple
              }, this.dropdown)
            }

            Accordion.prototype.dropdown = function(e) {
              var $el = e.data.el;
              $this = $(this),
                $next = $this.next();

              $next.slideToggle();
              $this.parent().toggleClass('open');

              if (!e.data.multiple) {
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
              };
            }
            var accordion = new Accordion($('.accordion'), true);
          });
          $("#CloseMainAcc").click(function() {
            $("#MainAcc1").remove();
          });
        });
      </script>
    </head>

    <body style="height: 900px;">
      <button id="insertAcc">Insert Accordion</button>
      <div id="TheDiv"></div>
      <h4>If the accordion is loaded before Document.ready than they both work fine.</h4>
      <ul class="accordion">
        <li class="open">
          <div class="link"> Heading Number 1 <i class="fa fa-chevron-down"></i> </div>
          <div class="submenu">
            <p>Body</p>
          </div>
        </li>
      </ul>
      <ul class="accordion">
        <li class="open">
          <div class="link"> Heading Number 1 <i class="fa fa-chevron-down"></i> </div>
          <div class="submenu">
            <p>Body</p>
          </div>
        </li>
      </ul>
      <style>
        body {
          height: 400px;
        }
        
        ul {
          list-style-type: none;
          padding-left: 10px;
        }
        
        h1 {
          color: #595959;
          font-size: 24px;
          font-weight: 100;
          margin-top: 10px;
        }
        
        h1 a {
          color: #d9d9d9;
          font-size: 16px;
        }
        
        .accordion {
          width: 100%;
          padding: 0;
        }
        
        .accordion .link {
          cursor: pointer;
          display: block;
          padding: 15px 15px 15px 42px;
          color: #d9d9d9;
          font-size: 14px;
          font-weight: 700;
          position: relative;
          -webkit-transition: all 0.4s ease;
          -o-transition: all 0.4s ease;
          transition: all 0.4s ease;
          background-color: #333;
        }
        
        .accordion li:last-child .link {
          border-bottom: 0;
        }
        
        .accordion li i {
          position: absolute;
          top: 16px;
          left: 12px;
          font-size: 18px;
          color: #d9d9d9;
          -webkit-transition: all 0.4s ease;
          -o-transition: all 0.4s ease;
          transition: all 0.4s ease;
        }
        
        .accordion li i.fa-chevron-down {
          right: 12px;
          left: auto;
          font-size: 16px;
        }
        
        .accordion li.open .link {
          color: #d9d9d9;
        }
        
        .accordion li.open i {
          color: #d9d9d9;
        }
        
        .accordion li.open i.fa-chevron-down {
          -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        
        .accordion li.default .submenu {
          display: block;
        }
        /************ Sub Menu *************/
        
        .submenu {
          background-color: #d6d6dd;
          font-size: 14px;
        }
        
        .submenu a {
          display: block;
          text-decoration: none;
          color: #d9d9d9;
          padding: 12px;
          -webkit-transition: all 0.25s ease;
          -o-transition: all 0.25s ease;
          transition: all 0.25s ease;
        }
        
        .submenu a:hover {
          background-color: #d9d9d9;
          color: #FFF;
        }
        
        .panel-body {
          padding: 0 0 10px 0;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }
        
        .TopContainer {
          background-color: #3b5998 !important;
          color: #FFF !important;
        }
        
        .GlyphiconRemove {
          color: #fff;
          float: right;
          margin-right: 25px;
          transition: all ease .5s;
          margin-bottom: 5px;
        }
        
        .GlyphiconRemove:hover {
          color: #f00;
        }
      </style>
    </body>

    </html>

＆＃13;

如果accordion在document.ready（）之后是append（）而不是它不起作用

0 个答案: