Question

又是我！我之所以回覆您，是因为我的Laravel专案发生Bootstrap Collapse问题。

因此，我将Bootstrap 4.2与在Apache 2上运行的Laravel 5.7一起使用。除引导崩溃的问题外，其他所有东西都工作正常。

这是我的代码：

@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的良好消息。实际上，例如当我打开崩溃1时，它在崩溃1中显示我：崩溃1和崩溃2处于同一状态，但是当我查看源代码时，一切正常。

修改

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

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

由于负载过多，无法正常工作吗？

Answer 1

如果我没记错的话，您就错过了结束标签：

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

在最后一个之前

@endif

引导程序崩溃的问题，显示所有崩溃仅需一个按钮

1 个答案: