Question

我有一个脚本会创建一个html，它有两列，每列有不同的部分。部分的数量是未知的，因此它可以是第1部分，第2部分，第3部分（部分只是标题的占位符）。我做了一些研究，发现了stackoverflow这个问题。这与我想要的类似，但我希望将它与以下样式一起使用： my demo 我希望手风琴在两个专栏的同一部分工作。

这是我的HTML：

<html class="no-js">
  <head>
  </head>

 <body>
                            <div>
                              <!-- introduce objective of page -->
                              <header>

                              </header>
      <div class="file_wrapper">
        <div class="file_inner">

<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 2</a></h3><div>
<span class="minus"><p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 3</a></h3><div>
<p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </div>                </div>                                                                                                    
              </div>
              </div>

      <div class="file_wrapper">

        <div class="file_inner">
<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 2</a></h3><div>
<p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </div>
<h3><a href="#">Section 3</a></h3><div>
<span class="plus"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
  </span>
                </div>                                                                                                    
              </div>
              <script>


$(".file_inner").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-s"></span>')
    .click(function() {
      $(this)
        .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
        .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
        .next().toggleClass("ui-accordion-content-active").slideToggle();
      return false;
    })
    .next()
      .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .show();
</script>

          </body>
        </html>

Answer 1

如果你想使用jQuery UI的手风琴，这里有一个简单的方法可以同时打开这两个部分：

http://codepen.io/neagle/pen/Bdhmb

var $ accordions = $（'。accordion'）;

$('.accordion').accordion({
  beforeActivate: function (event, ui) {
    var $this = $(this);

    if (!$this.hasClass('programatic')) {
      var active = $this.children('.ui-accordion-content').index(ui.newPanel);
      var $otherAccordions = $accordions.not($(this));

      $otherAccordions.addClass('programatic');
      $otherAccordions.accordion('option', 'active', active);
      $otherAccordions.removeClass('programatic');
    }
  }
});

如果您不想使用jQuery UI，那么策略应该与您想要尝试的任何内容相同。选择某些内容后，在列中找出其索引，然后触发另一列中具有相同索引的其他项的激活。

如何使用jquery显示和隐藏两个独特的部分

1 个答案: