我該如何製作按鈕摺疊部分？

Question

現在我在我的網頁上的幾個位置上使用了這個手風琴按鈕。目前，當它開放時，如果你點擊手風琴內的任何地方，它會崩潰。我想讓它只是手風琴的頂部，實際上是按鈕部分，因此我可以將鏈接和其他內容添加到手風琴內容中。 https://jsfiddle.net/nc4euge3/

下面是一些代碼，因爲它不能沒有它鏈接到JS小提琴：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<div class="accordion"> 
    <div class="accordion-item"> 
     <div class="accordion-button"> 
      <h3> 
      <div class="accordion-marker"><i class="fa fa-plus"></i></div><span class="question">Thing #1</span> 
     </h3> 
    </div> 
    <p> 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
    </p> 
</div> 

Answer 1

您將需要一個小的調整，有 - 聽點擊按鈕，而不是整個手風琴項目。

檢查演示 - https://fiddle.jshell.net/ermakovnikolay/nc4euge3/2/

$(document).ready(function() { 
    var $accordion = $('.accordion .accordion-item'); 
    $('.accordion-button').click(function() { /* change to the button */ 
     var $this = $(this).parent(); /* update to get the accordion item container */ 
     if ($this.hasClass('active')) { 
      $this.removeClass('active').find('i').removeClass('fa-minus').addClass('fa-plus'); 
     } else { 
      $accordion.removeClass('active'); 
      $this.addClass('active'); 
      $accordion.find('i').removeClass('fa-minus').addClass('fa-plus'); 
      $this.find('i').addClass('fa-minus') 
     } 
    }); 
});