在jQuery手风琴中打开特定面板

时间:2015-01-02 08:15:36

标签: jquery wordpress jquery-ui accordion

我在wordpress博客上使用jQuery手风琴。每当作者上传新文章时,它都会添加面板(新文章=新面板)。如何制作,加载页面时,第一个面板是打开的?我已经阅读了几个教程,但似乎所有这些都依赖于可以通过php改变的可折叠手风琴?我想,我需要某种功能来确定在触发第一个面板打开之前有多少个面板?

这是我的jQuery代码:

jQuery(document).ready(function($) {

try{Typekit.load();}catch(e){}

(function($) {
// What does the accordion plugin do?
$.fn.accordion = function(options) {

  if (!this.length) { return this; }

  var opts = $.extend(true, {}, $.fn.accordion.defaults, options);

  this.each(function() {
    var $this = $(this).find('dl');

    var $all_panels = $this.find("dd");

    if(Modernizr.cssanimations)
    {
      $this.find("dt:first .arrow").addClass();
    }
    else
    {
      $this.find("dt:first .arrow").addClass();
    }

    $this.find("dt > a").on('click', function(event){

      event.preventDefault();

      if(!$(this).parent().hasClass('active'))
      {

       $all_panels.slideUp();
       var $active = $('dl .active').removeClass('active');

       $(this).parent().next().slideDown().addClass('active');
       $(this).parent().addClass('active');

       if(Modernizr.cssanimations)
       {
         $active.filter('dt').find('.arrow').removeClass('down-anim');
         $(this).parent().find('.arrow').addClass('down-anim');
       }
       else
       {
         $active.filter('dt').find('.arrow').removeClass('down');
         $(this).parent().find('.arrow').addClass('down');
       }
      }

    });

  });

  return this;
};

// default options
$.fn.accordion.defaults = {};
})(jQuery);



// call plugin
$(".accordion").accordion()

});

在我的PHP代码中,我致电<dl>&amp; <dt>一次并将其发送到循环中,因此它会根据有多少篇文章而相乘。

所以这是它给我的HTML:

<div class="accordion">
 <dl>
  <dt>
   <a href="#"><span class="arrow"></span><div class="accordion-user"></div></a>
  </dt>
  <dd>
   <img class="author_image" src=".../my_directory/150x190.png">
   <div class="author_wrapper">
   </div>
  </dd>
 </dl>
 <dl>
  ...
 </dl>
 <dl>
  ...
 </dl>
</div>

......等等......

非常感谢: - )

0 个答案:

没有答案