Question

目前我已经设置了一个手风琴页面，所以当你点击每个手风琴选项卡时它会折叠上面或下面的那个。

我想要达到的是你可以点击一个打开的手风琴标签，你可以关闭它。

我的HTML如下：

<dl class="accordion">
            <dt class="title">
                <p>Accordion 1</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
            <dt class="title">
                <p>Accordion 2</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
<dt class="title">
                <p>Accordion 3</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
<dt class="title">
                <p>Accordion 4</p>
               </dt>
                <dd>
                <p>Some text for the accordion here...</p>
            </dd>
</dl>

我的Jquery是：

(function($) {
var allPanels = $('.accordion > dd').hide();
    $('.accordion > dd:first-of-type').show();
    $('.accordion > dt:first-of-type').addClass('accordion-active');
  jQuery('.accordion > dt').on('click', function() {
      $this = $(this);
  $target = $this.next(); 
  if(!$this.hasClass('accordion-active')){
      $this.parent().children('dd').slideUp();

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.addClass('accordion-active');
      $target.addClass('active').slideDown();
  }    
return false;
  });

})(jQuery);

Answer 1

如果使用jQuery UI手风琴，只需在init上将collapsible选项设置为true，例如

$(document).ready(function(){
    $('.accordion').accordion({collapsible:true});
});

如果不使用jQuery UI手风琴，也许你应该是;）

See it in action in this fiddle

See the docs here

Answer 2

您检查元素是否具有类nfc-mfclassic r a mfoc_output.mfd mfoc_output.mfd NFC reader: ACS / ACR122U PICC Interface opened Expected MIFARE Classic card with UID starting as: 00000000 Got card with UID starting as: 049f30b2 Aborting!，因此添加accordition-active部分。

else

http://jsfiddle.net/h28n5aw5/

Answer 3

你可以试试这个：

(function($) {
var allPanels = $('.accordion > dd').hide();
    $('.accordion > dd:first-of-type').show();
    $('.accordion > dt:first-of-type').addClass('accordion-active');
  jQuery('.accordion > dt').on('click', function() {
      $this = $(this);
  $target = $this.next(); 
  if(!$this.hasClass('accordion-active')){
      $this.parent().children('dd').slideUp();

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.addClass('accordion-active');
      $target.addClass('active').slideDown();
  } else {

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.parent().children('dd').slideUp();
  }
return false;
  });
})(jQuery);

此代码打开并折叠手风琴。 DeMO

另外，您可以使用jQueryUI Accordion插件。

Answer 4

    (function($) {
    

  $('.accordion > dd').hide();
  $('.accordion > dd.active').show();
    
  $('.accordion > dt').on("click", function(event){
    $("dt").removeClass("active");
   
      $this = this.className;
       $(this).addClass("active");
      $target =  ("dd."+$this+"");
        $("dd").removeClass('active').slideUp();
        $($target).addClass('active').slideDown();

    
      
    return false;
  });

})(jQuery);

   
.accordion dt{
       display: inline-block;
    margin: 0;
    list-style: none;
        position: relative;
    background-color: #fff;
        padding: 10px 12px;
}
.accordion dt.active{
      background-color: #eee;
}

.accordion dd{
      padding: 15px;
      background-color: #eee;
    border-bottom: 4px solid #d6d6d6;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
        margin: 0px;
}
@media only screen and (max-width: 736px) {
 .accordion dt{
    /*width: 100%;*/
 }
}

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

<dt class="panel1 active"><a href="">
    Tab 1
</a></dt>
<dt class="panel2"><a href="">
    Tab 2
</a></dt>
<dt class="panel3"> <a href="">
    Tab 3
</a></dt>
<dt class="panel4"> <a href="">
    Tab 4
</a></dt>

<dd class="panel1 active">
    <h3>Tab 1 Heading</h3>

<p>Part of Sohar Aluminium's overall strategy is to promote and support the creation of a robust downstream aluminium industry in Oman to increase the value of producing Aluminium to Oman's economy as well as to create further employment and business opportunities.Sohar Aluminium has helped establish and supplies to 2 downstream companies that are in operation. These are:</p>

</dd>


<dd class="panel2">
    <h3>Tab 2 Heading</h3>

<p>Part of Sohar Aluminium's overall strategy is to promote and support the creation of a robust downstream aluminium industry in Oman to increase the value of producing Aluminium to Oman's economy as well as to create further employment and business opportunities.Sohar Aluminium has helped establish and supplies to 2 downstream companies that are in operation. These are:</p>
</dd>


<dd class="panel3">
    <h3>Tab 3 Heading</h3>

<p>The volume of liquid sold directly to the downstream will increase each year and is anticipated to reach 200,000 tonnes in the year 2016, increasing In-Country Value. The long-term plan for Sohar Aluminium is to supply 60% of its production in hot metal form to its downstream partners while the rest will be exported in the form of solid ingots and sows.</p>
</dd>

<dd class="panel4">
   <h3>Tab 4 Heading</h3>

<p>The volume of liquid sold directly to the downstream will increase each year and is anticipated to reach 200,000 tonnes in the year 2016, increasing In-Country Value. The long-term plan for Sohar Aluminium is to supply 60% of its production in hot metal form to its downstream partners while the rest will be exported in the form of solid ingots and sows.</p>
</dd>

</dl>

如何折叠手风琴标签？

4 个答案: