javascript - 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>

这是我展开所有三个然后折叠然后发生的事情

这很好用。但是

I think 1 way to solve this. when i expand some div other expanded divs are will close. How do i do that? Or is there any way to solve this problem?

Answer 1

这是您正在寻找的 jQuery:

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