Question

我从这里下载了我的手风琴：http://www.snyderplace.com/demos/accordion.html我的老板告诉他，当用户点击每个标题时，他希望打开和关闭该功能。

例如，当您单击一个标题时，它将打开，当您单击另一个标题时，它也将打开，但先前打开的标题将不会关闭，除非再次单击标题。

我能够通过更改代码来实现这一目标：

    animateClose: function (elem, opts) {

到此：

    animateClose: function (elem) {

现在的问题是标题需要点击一次而不是两次。有没有办法解决这个问题？

这是完整的代码：

    <script type="text/javascript">
    $(document).ready(function() {

    //syntax highlighter
    hljs.tabReplace = ' ';
    hljs.initHighlightingOnLoad();

    //accordion
    $('h3.accordion').accordion({
    defaultOpen: 'section1',
    cookieName: 'accordion_nav',
    speed: 'slow',
    animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
    elem.next().slideFadeToggle(opts.speed);
    },
    animateClose: function (elem) { //replace the standard slideDown with custom function
    elem.next().slideFadeToggle(opts.speed);
    }
    });
    $('h3.accordion2').accordion({
    defaultOpen: 'sample-1',
    cookieName: 'accordion2_nav',
    speed: 'slow',
    cssClose: 'accordion2-close', //class you want to assign to a closed accordion header
    cssOpen: 'accordion2-open',
    });

    //custom animation for open/close
    $.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };

    });
</script>

Answer 1

<强> jsBin demo

HTML：

  <div class="accordion">
    <h3>Title 1</h3>
    <div>Content 1...</div>
    <h3>Title 2</h3>
    <div>Content 2...</div>  
    <h3>Title 3</h3>
    <div>Content 3...</div>  
    <h3>Title 4</h3>
    <div>Content 4...</div>  
  </div>

jQuery的：

var $accordionIO = $('.accordion h3');
$accordionIO.next('div:gt(0)').hide(); // hide all but first section

$accordionIO.click(function(){
  $(this).next('div').slideToggle();
});

Answer 2

如果您仔细阅读了源文件jquery.accordion.js，则会看到以下代码：

//opens a accordion panel
function open($this, opts) {
    close(opts);
    //give the proper class to the linked element
    $this.removeClass(opts.cssClose).addClass(opts.cssOpen);

    //open the element
    opts.animateOpen($this, opts);

    //do cookies if plugin available
    if (useCookies(opts)) {
        // split the cookieOpen string by ","
        id = $this.attr('id');
        setCookie(id, opts);
    }
}

如您所见，此功能的第一件事是 -

    close(opts);

即关闭所有打开的标题。我想如果你评论这一行，你就能实现你所需要的。

点击后，jQuery Accordion点击一次展开/折叠

2 个答案: