代码之家  ›  专栏  ›  技术社区  ›  J Doe

单击另一个选项卡时手风琴关闭选项卡

  •  0
  • J Doe  · 技术社区  · 8 年前

    我已经创建了一个手风琴,但我希望它在单击另一个选项卡时关闭选项卡。此时,它会打开选项卡,但当单击另一个选项卡时,它不会关闭最后一个选项卡。。。

    代码如下:

    <button class="accordion">Accordion</button>
    <div class="panel">Content</div>
    
    <button class="accordion">Accordion 2</button>
    <div class="panel">Content</div>
    

    This is the code working

    2 回复  |  直到 8 年前
        1
  •  2
  •   Marcos C. Loures    8 年前

    只需在点击事件中“关闭”所有手风琴页面。

    var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        var elems = document.getElementsByClassName("accordion");
        for(var it of elems) {
          it.classList.remove("active");
          it.nextElementSibling.style.maxHeight = null;
        }
    
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    
    }
    

    Live demo.

        2
  •  1
  •   PPL    8 年前

    使用下面的手风琴,在html链接上给出路径时下载第一个js和css

    $( "#accordion" ).accordion({event:false, active :false});
    
    var noSections = $("#accordion h3").length-1;
    
    $("h3").each(function (index, element)
    {
        $(element).click(function()
        {
           if($(this).hasClass('ui-state-active'))
           {
               if(index < noSections)
                  $("#accordion").accordion('option','active',index + 1);
               else
                  $("#accordion").accordion('option','active',index - 1);
           }
           else
           {
              $("#accordion").accordion('option','active',index);
           }
       });
    }); 
      
    .accordionStyle{
     position: relative !important;
     width:500px !important; 
     margin: 30px auto !important;
    }
    
    .accordionStyle h3{
     padding-left:35px; 
    }
    
    p{
     font-size:12px 
    }
    .ui-accordion .ui-accordion-icons {
        padding-left: 2.2em;
    }
    .ui-accordion .ui-accordion-header {
        display: block;
        cursor: pointer;
        position: relative;
        margin: 2px 0 0 0;
        padding: .5em .5em .5em .7em;
        min-height: 0;
        font-size: 100%;
    }
    .accordionStyle h3 {
        padding-left: 35px;
    }
    .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
        border-top-right-radius: 4px;
    }
    .ui-widget-content {
        border: 1px solid #aaaaaa;
        background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
        color: #222222;
    }
    <div id="accordion" class="accordionStyle">
      <h3>Accordion 1</h3>
      <div>
        <p>
        test1
        </p>
      </div>
      <h3>Accordion  2</h3>
      <div>
        <p>
       test2
        </p>
      </div>
      <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>