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

【问题标题】：jQuery Accordion click once expand/collapse when clickedjQuery Accordion 单击一次展开/单击时折叠
【发布时间】：2012-10-18 18:57:39
【问题描述】：

我从这里下载了我的手风琴：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>

【问题讨论】：

请同时发布您的相关标记。仅供参考，对于此类问题，您可以使用jsfiddle 等在线工具提交有问题的代码
来自 jQuery-UI 手风琴API documentation：“注意：如果您想同时打开多个部分，请不要使用手风琴。手风琴不允许多个内容面板同时打开，这需要花费很多精力。如果您正在寻找一个允许打开多个内容面板的小部件，请不要使用它。”。该页面上有一个示例，说明如何在几行代码中实现多个扩展面板。

标签： jquery accordion double-click

【解决方案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();
});

【讨论】：

这很完美，但如果我希望它最初被关闭，我需要写什么？
@JoshuaWaheed 只需将第二行替换为以下行：$accordionIO.next('div').hide(); 它将隐藏所有 div 而不是 GreatherThan 索引。如果你想打开一个特定的部分，你可以这样做：$accordionIO.next('div').hide().eq(2).show(); 这将默认打开第三部分，隐藏所有其他部分。
非常感谢。它按我需要的方式完美运行。
嗨，我添加了一些名为“关闭”的文本，因为我需要在单击手风琴时关闭手风琴，就像单击标题时一样。有没有办法做到这一点？
@JoshuaWaheed 我不想猜测您将这些按钮放在哪里。请在提问时更加简洁，并请准备/或/更新我们的演示，以便我查看

【解决方案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);

即关闭所有打开的标题。我认为，如果您对此行发表评论，您将实现所需的目标。

【讨论】：

我试过这样做，但没有任何区别。我还是要双击。