Jquery 可折叠切换

Question

我曾尝试使用 Jquery 手风琴，它似乎对我有用，但是当我想使用可折叠/切换模式时，我可以看到所有选项卡都为我打开，然后我就遇到了问题。我有自己的 CMS，下面是 HTML 的代码。 “我想通过单击标题来查看 div 部分”。我不想更改 HTML 部分中的任何内容，只想在这里使用 JQuery。 HTML PART、JS PART、JQUERY如下

    <div class="js-toggle-headline sf-toggle-headline">
        <h3 class="active">Headline 1</h3>
        <div>$charClone{Content Part 1</div>
        <h3>Headline 2</h3>
        <div>$charClone{Content Part 2$\ }{30}</div>
        <h3>Headline 3</h3>
        <div>$charClone{Content Part 3$\ }{30}</div>
    </div>

Javascript 和 Jquery

$$js_toggle{$hashTable.new
{selector}{h3}
{target}{div}
{container}{.js-toggle-headline}
{animation}{slide}
{initialize}{$java.new{java.lang.Boolean}{1}}
{toggleClass}{active}}


$(function(){
            $('.js-toggle-headline').accordion({
                heightStyle: 'target',
                active: false,
                collapsible: true,
                autoHeight: true
            });
        });

Answer 1

好吧，我认为有一些 API 选项可以让它在不折叠其他部分的情况下工作，但显然不是。然而，这种行为可以通过一些模组来实现，但确实涉及到一个小的 html 更改。具体变化见三个代码cmet。

$(document).ready(function() {
                      // add div in the selector
    $('.js-toggle-headline > div').accordion({
        heightStyle: 'target',
        active: false,
        collapsible: true,
        autoHeight: true,
        header: 'h3'  // set the designated accordion header element
    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <div class="js-toggle-headline sf-toggle-headline">
      <div> <!-- add a div wrapper to each group -->
        <h3>Headline 1</h3>
        <div>Content Part 1</div>
      </div>
      <div>
        <h3>Headline 2</h3>
        <div>Content Part 2</div>
      </div>
      <div>
        <h3>Headline 3</h3>
        <div>Content Part 3</div>
      </div>
    </div>

=====

另外一种方式，不用额外的html，实现类似手风琴的效果，但是不用jqueryui提供的手风琴，而是用jquery来处理：（显然不会那么花哨，而且没有动画）

当然，保留 jqueryui 以供其他小部件需要。

// handler for each h3 with the section class.
$('h3.section').on('click', function() {
      let child = $(this).next();
      if (child.is(':hidden')) {
          child.show();
      } else {
          child.hide();
      }
});

#accordion > h3 {
    border-radius: 5px;
    background-color: lightgray;
    margin: 1px;
    padding: 5px;
}

#accordion > div {
    display: none;
    margin-left: 20px;
    padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordion"> <!-- I kept the same ID for CSS -->
      <h3 class="section">Headline 1</h3>
      <div>Content Part 1</div>
      <h3 class="section">Headline 2</h3>
      <div>Content Part 2</div>
      <h3 class="section">Headline 3</h3>
      <div>Content Part 3</div>
      <h3 class="section">Headline 4</h3>
      <div>Content Part 4</div>
</div>
<!-- I added class="section" to each h3, in case other h3 elements might exist -->