引导崩溃的问题显示所有崩溃只有一个按钮

Question

又是我 ！我回到你身边，因为我的Laravel项目中的Bootstrap Collapse存在问题。

所以，我正在使用Bootstrap 4.2和运行在Apache 2上的Laravel 5.7。除了bootstrap崩溃的问题外，一切正常。

所以我的代码：

@if(Auth::check())
<div class="col-md-12 mb-0">
  <div class="row">
    @foreach($message as $message)
     <div class="col-md-2">
      <div class="collapse multi-collapse" id="collapse-{{$message->id}}">
        <div class="font-weight-bold">
          <div id="pvMessage">
            @foreach($message->PrivateMessages as $msg)
            <div id="{{$msg->conversation_id}}">{{$msg->userInfo->name}} : {!! $msg->message !!}</div><br /> @endforeach
          </div>
        </div>

        <form class="pt-2">
          <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <input type="hidden" name="user_id" value="{{Auth::user()->id}}" id="user_id" />
          <input type="hidden" name="conversation_id" value="{{$message->id}}" id="channel_id" />
          <div class="input-group mb-3">
            <input type="text" name="message" id="message" class="form-control">
            <div class="input-group-append">
              <input type="hidden" id="sendPv" />
            </div>
           </div>
        </form>
      </div>
    </div>
    @endforeach
  </div>

  <div id="private-message">
    @foreach($private as $private)
    <button onclick="clearInterval(getPvListe)" @if($private->latestMessage->seen == 0 && $private->latestMessage->user_id !== Auth::user()->id)
    class="btn btn-danger"
    @else
    class="btn btn-info"
    @endif
     type="button" data-toggle="collapse" data-target="#collapse-{{$private->id}}" aria-expanded="false" aria-controls="collapse-{{$private->id}}">
     @if($private->user_id != Auth::user()->id)
     {{$private->userInfo->name}}
    @elseif($private->to_id != Auth::user()->id)
     {{$private->toInfo->name}}
     @endif</button> @endforeach
  </div>
      @endif

使用Javascript：

var getPvListe = setInterval(function () {
    $("#private-message").load(location.href + " #private-message");
}, 2000);
setInterval(function () {
    $("#pvMessage").load(window.location.href + " #pvMessage");
}, 2000);

$("#message").on('keydown', function (e) {
    if (e.which == 13) {
        $("#sendPv").trigger('click');
        return false;
    }
 });
$("#sendPv").click(function (e) {
    e.preventDefault();
    var user_id = $("input[name='user_id']").val();
    var conversation_id = $("input[name='conversation_id']").val();
    var message = $("input[name='message']").val();
    var objDiv = document.getElementById("scrollable");
    $.ajax({
        type: 'POST',
        url: '/pv/sendPv',
        data: {
            message: message,
            conversation_id: conversation_id,
            user_id: user_id
        },
        success: function (data) {
            console.log(data.success);
            $("#message").val('').focus();
            objDiv.scrollTop = objDiv.scrollHeight;
        }
    });
 });

我希望所有崩溃都能正确显示，好的ID上有好消息。实际上，当我打开例如collapse-1时，它显示我在崩溃-1：崩溃-1和崩溃-2同样，但当我看到我的源代码时，一切都很好。

编辑

当我用Mozilla检查我的代码时，我看到了这一部分：

setInterval(function () {
    $("#pvMessage").load(window.location.href + " #pvMessage");
}, 2000);

因为加载太多而无法正常工作？

Answer 1

如果我没错，你错过了结束标记：

<div class="col-md-12 mb-0">

在最后一次之前

@endif