Панель начальной загрузки не открывается после краха

У меня панель закрывается при нажатии кнопки, но когда я снова нажимаю кнопку, панель не открывается.

Я проверил, чтобы убедиться, что не пропустил ни одного закрывающего тега, и обнаружил, что все в порядке.

Не уверен, что я пропустил.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>

<button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "#myPanel" aria-expanded = "false" aria-controls = "myPanel">
    Collapse
  </button>

<div id = "VIDContactInfoWrapper" style = "border:1px solid black;">
  <div class = "panel panel-default" style = "height:inherit;">
    <div class = "panel-heading" style = "padding: 5px 5px !important">Information</div>
    <div class = "panel-body" id = "myPanel" style = "padding-top:0;padding-bottom:0;height:300px; background-color:hotpink;">
      <div class = "row">
        <div class = "col-md-12">
          <div class = "row">
            <div id = "VIContactInfo" class = "col-md-6" style = "background: white;"></div>
            <div id = "VIAddressInfo" class = "col-md-6" style = "background: white;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jquery twitter-bootstrap

08.04.2019 18:52

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

На самом деле вам нужно обернуть тело панели в складной div. https://getbootstrap.com/docs/3.3/javascript/#collapse

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>

<button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "#myPanel" aria-expanded = "false" aria-controls = "myPanel">
    Collapse
  </button>

<div id = "VIDContactInfoWrapper" style = "border:1px solid black;">
  <div class = "panel panel-default" style = "height:inherit;">
      <div class = "panel-heading" style = "padding: 5px 5px !important">Information</div>
  <div  id = "myPanel" class = "panel-collapse collapse in">
  <div class = "panel-body" style = "padding-top:0;padding-bottom:0;height:300px; background-color:hotpink;">
      <div class = "row">
        <div class = "col-md-12">
          <div class = "row">
            <div id = "VIContactInfo" class = "col-md-6" style = "background: white;"></div>
            <div id = "VIAddressInfo" class = "col-md-6" style = "background: white;"></div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

08.04.2019 19:01

Ответ принят как подходящий

Предоставленный вами код работает так, как ожидалось. Проблема в том, что вы определяете высоту элемента panel-body с помощью встроенного стиля, который перезаписывается при использовании переключателя Bootstrap. Чтобы решить эту проблему, просто разрешите содержимому внутри panel-body определять высоту или вместо этого определите высоту во внешнем CSS:

.panel-body {
  padding-top:0;
  padding-bottom:0;
  height:300px;
  background-color:hotpink;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>

<button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "#myPanel" aria-expanded = "false" aria-controls = "myPanel">
    Collapse
  </button>

<div id = "VIDContactInfoWrapper" style = "border:1px solid black;">
  <div class = "panel panel-default" style = "height:inherit;">
    <div class = "panel-heading" style = "padding: 5px 5px !important">Information</div>
    <div class = "panel-body" id = "myPanel">
      <div class = "row">
        <div class = "col-md-12">
          <div class = "row">
            <div id = "VIContactInfo" class = "col-md-6" style = "background: white;"></div>
            <div id = "VIAddressInfo" class = "col-md-6" style = "background: white;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я собираюсь принять это как ответ, потому что вы объяснили, в чем проблема. Однако открытие панели @imvain2 было более плавным и не таким прерывистым, как кажется.

— 08.04.2019 19:06

@Chris Это связано с другими встроенными стилями, которые есть в вашем коде (цвета фона для ваших столбцов и т. д.). Вы действительно должны попытаться определить любой стиль в таблице стилей или тегах стиля на странице. Плохая практика — вставлять CSS в ваш код.

— 08.04.2019 19:08

О, я знаю об этом, это просто для проверки, прежде чем я выложу это в жизнь.

— 08.04.2019 19:18

08.04.2019 19:01