Как отключить панель в начальной загрузке

В настоящее время я использую панель Bootstrap, но не могу отключить панель. Я добавил отключенный класс и его не беру. Как отключить панель в Bootstrap с помощью jquery или css. Ниже я вставил код.

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default disabled" id='result' disabled>
      <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><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
          </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
               Collapsible Group Item #2 
            </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
          </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
              Collapsible Group Item #3 
            </a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
          </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Источник

2 ответа

Если вы хотели отключить функцию "Свернуть" или "Показать коллапс" в начальной загрузке, вы можете использовать hide.bs.collapse а также show.bs.collapse События.

Пример: добавьте следующий HTML-код для вызова функции отключения!

  <button class="btn btn-primary" id="btnDisable">click to disable</button>

Затем следующий JS делает свое дело.

    var disablePanel = false;  //or falsey value
    $("#accordion").on('hide.bs.collapse show.bs.collapse',  PanelEvent);

    function PanelEvent(e){
       $self = (this);  
       if(disablePanel){    
       e.preventDefault();    // this is the trick
       console.log("panel should not behave");
      }
     else{
       console.log("panel opens or closes!");
      }
     };

  $("#btnDisable").click(function(e){
    disablePanel = true; //or truthy value
    console.log(goAhead);
  });

Примечание: важная часть заключается в использовании hide.bs.collapse а также show.bs.collapse События. Приведенный выше пример является лишь одним из способов использования этих событий.

Предупреждение: hidden.bs.collapse а также shown.bs.collapse события запускаются после свертывания аккордеона, поэтому эти события не будут работать, чтобы отключить панель [аккордеон].

Источник

Что ж, это действительно тяжело смотреть в Bootstrap;

методы

.collapse (варианты)

Активирует ваш контент как складной элемент. Принимает необязательные параметры объекта.

$('#myCollapsible').collapse({
  toggle: false
})

я добавил к вам пример: пример jsfiddle, но работаю только внутри id="collapseTwo no-open-lmao", и работа...

$('.no-open-lmao').collapse({
  toggle: false
})

в соответствии:

 <div id="collapseTwo no-open-lmao" class="panel-collapse collapse">
Источник

У меня есть маленькая хитрость, которую я сегодня использовал на работе:

просто очистите атрибут data-toggle.

Я не знаю, аккуратно это или нет, но это работает

  $("#disablePanels").on("click",function(){
 $(".accordion-toggle").attr("data-toggle", "");
  });
  
    $("#enablePanels").on("click",function(){
  $(".accordion-toggle").attr("data-toggle", "collapse");
  });
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  
  
   <div class="panel-group" id="accordion">
    <div class="panel panel-default" id='result'>
      <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><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
          </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
               Collapsible Group Item #2 
            </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
          </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
              Collapsible Group Item #3 
            </a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
          </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>
  
    <button type="button" class="btn btn-primary" id="disablePanels" style="width:200px;margin-right:10px;">Disable panels</button>
 <button type="button" class="btn btn-primary" id="enablePanels" style="width:200px;margin-right:10px;">Enable panels</button>

Источник
Другие вопросы по тегам