Laravel 5 jquery 可扩展 div

Question

查看

<div class="panel-group" id="accordion">
@foreach($faqs as $index => $faq)
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse-{{ $index }}">{{ $faq->title }}</a>
        </h4>
    </div>
    <div id="collapse-{{ $index }}" class="panel-collapse collapse out">
        <div class="panel-body">
            {!! $faq->description !!}
            @if(Auth::user()->isAdmin())
                <form action="{{ url('faqs', [$faq->id]) }}" method="POST">
                <input type="hidden" name="_method" value="DELETE">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="submit" class="button" value="Delete"/>
                </form>
            @endif
        </div>
    </div>
</div>
@endforeach
</div>

我复制的示例

    <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
           Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ............................
      </div>
    </div>
  </div>

这是当我展开所有三个并折叠然后发生这种情况

这很好用。但是

我认为有一种方法可以解决这个问题。当我扩展一些 div 其他扩展 div 将关闭。我怎么做？或者有什么办法可以解决 这个问题？

Answer 1

这是您要查找的 jQuery：

jQuery('.accordian-toggle').click(function() {jQuery('.panel-collapse').hide();jQuery(this).parent('.panel-heading').next().show();}