jQuery Accordion 单击一次展开/单击时折叠

Question

我从这里下载了我的 Accordion :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();
});