Question

我试图在点击后将数据加载到手风琴面板中的表格中。我已尝试了许多不同的方法，并尝试在DOM对象中找到它，但我无法找到如何直接访问它。这并不复杂，但我可能只是过分迷惑自己到了我要去的地方。

我有一个基本的手风琴：

<div id="bb-content">
   <h3 data-category="cat1">Name1</h3>
   <div>
      <table class="bb-table">
         <tbody class="bb-content">
         </tbody>
      </table>
   </div>
   <h3 data-category="cat2">Name2</h3>
   <div>
      <table class="bb-table">
         <tbody class="bb-content-body">
         </tbody>
      </table>
   </div>
....
</div>

等。

使用此jQuery UI方法构建

$('#bb-content').accordion({ 
   active: false,
   collapsible: true,
   heightStyle: "content",
   beforeActivate: function(event, ui) {
      var cat = ui.newHeader.data("category");
      var tbody = $(this).find('.bb-content-body');                     

      //if(!$.trim( tbody.html() ).length) {
         tbody.load("/ajax/bb", {'cat': cat});
      //}
   }
});

这是我最实用的版本。我已经尝试了很多其他的东西，但这有点起作用。而我想要做的是注释掉的部分，但它选择所有的类（就像它应该），而不仅仅是H3下面的第一个类。

基本上，我想每个面板只查询一次ajax页面。

使用jQuery-UI 1.10.4

Answer 1

使用

var tbody = ui.newHeader.next().find('.bb-content-body');

而不是

var tbody = $(this).find('.bb-content-body');

原因：$(this)引用$('#bb-content')，而您需要使用当前的手风琴标题ui.newHeader

选择活动手风琴面板下的课程

1 个答案: