Question

所以我有一个带链接的网站，我已经看到了这个http://jqueryui.com/accordion/但是当有人点击手风琴中的链接打开并加载来自我自己的php脚本的内容而不是像这样预加载时我想要

<h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis       porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>

在页面加载但是点击打开并加载来自我的外部php脚本的动态内容（正在传递一个值以在每次链接点击时返回结果）我们该怎么做？我到处搜索，所有的例子都是预装在html中的静态内容，我需要点击

加载链接

欢呼声

Answer 1

使用load动态加载每个面板中的内容的方法是：

使用beforeActivate事件
加载前禁用手风琴，加载完成后再次启用手风琴。
你可以使用＆＃34; ui.newHeader＆＃34;测试哪个参数将成为新面板
您可以使用ui.newPanel作为要加载内容的div元素

避免在手风琴面板中加载完整的HTML页面。如果您有兴趣加载完整的html页面，则需要将内容作为iframe插入div中。

＆＃13;

$(function () {
  $( "#accordion" ).accordion({
    beforeActivate: function( event, ui ) {
      // in order to avoid to re-load the same data use a data attribute
      if (ui.newPanel.data('already-loaded') !== undefined) {
        return;
      }
      ui.newPanel.data('already-loaded', true);
      // disable accordion to wait for loading finishes
      $( "#accordion" ).accordion( "option", "disabled", true );
      switch (ui.newHeader.text()) {
        case 'Section 1':
          ui.newPanel.load('page1.html', function() {
            $( "#accordion" ).accordion( "option", "disabled", false );
            this.append('Section 1 loaded');
          });
          break;
        case 'Section 2':
          ui.newPanel.load('page2.html', function() {
            $( "#accordion" ).accordion( "option", "disabled", false );
            this.append('Section 2 loaded');
          });
          break;
        case 'Section 3':
          ui.newPanel.load('page3.html', function() {
            $( "#accordion" ).accordion( "option", "disabled", false );
            this.append('Section 3 loaded');
          });
          break;
        case 'Section 4':
          ui.newPanel.load('page4.html', function() {
            $( "#accordion" ).accordion( "option", "disabled", false );
            this.append('Section 4 loaded');
          });
          break;
        default:
          $( "#accordion" ).accordion( "option", "disabled", false );
      }
    }
  });
});

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<div id="accordion">
    <h3>Section 1</h3>
    <div>
    </div>
    <h3>Section 2</h3>
    <div>
    </div>
    <h3>Section 3</h3>
    <div>
    </div>
    <h3>Section 4</h3>
    <div>
    </div>
</div>

＆＃13;

Answer 2

因此，使用Accordion的活动，您可以执行以下操作：

JS：

  $("#accordion").on( "accordionbeforeactivate", function(event,ui) {
     var panel = ui.newHeader[0];
     var requiredURL = $(panel).data('url');

      $.ajax({
        url : requiredURL,
        success : function(res){
          ui.newPanel[0].innerHTML = res;
        },
        error : function(msg){

        }
      });

  });

然后在手风琴标题的每个H3上添加您需要的网址或数据：

<h3 data-url="the-url-to-load-content">

我很难测试，但上面的内容可能是你的后遗症。

jquery accordion但从另一个脚本加载内容

2 个答案: