jQuery可折叠切换

如何解决jQuery可折叠切换

我尝试过使用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
            });
        });

解决方法

嗯，我认为有一些API选项可以使其在不折叠其他部分的情况下起作用，但是显然没有。但是，此行为可以通过某些mod来实现，但确实需要进行少量的html更改。有关特定更改，请参见三个代码注释。

$(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即可达到类似的手风琴效果的方法，但是使用OUT时使用的是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 -->