Zum deaktivieren der Systemsteuerung in der bootstrap

Ich bin derzeit mit Bootstrap panel, aber ich bin nicht in der Lage, deaktivieren Sie die Systemsteuerung. Ich habe einer Behinderten-Klasse und Ihrer nicht nehmen. Wie deaktiviere ich das panel in der Bootstrap mit jquery oder css. Unten habe ich den code eingefügt.

HTML:

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

  • bitte poste ein Beispiel auf jsfiddle?
  • jsfiddle.net/hqjk2e1r
  • Heads-up - ich glaube, Sie sollten hinzufügen, in der jQuery-Datei, bevor die bootstrap.min.js
InformationsquelleAutor user1578849 | 2015-05-25
  1. 0

    Wenn Sie also deaktivieren, ein Zusammenbruch oder "show Zusammenbruchs" Funktionalität in einem, bootstrap, dann können Sie hide.bs.collapse und show.bs.collapse Veranstaltungen.

    Beispiel:
    Fügen Sie folgenden HTML-Code aufrufen, deaktivieren Sie die Funktion!

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

    Dann folgende JS funktioniert der trick.

        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);
  });

    Hinweis: Der wichtige Teil ist, zu nutzen hide.bs.collapse und show.bs.collapse Veranstaltungen. Das obige Beispiel ist nur eine Möglichkeit, Sie zu nutzen, um diese Ereignisse.

    Warnung: hidden.bs.collapse und shown.bs.collapse - Ereignisse ausgelöst werden, die nach Akkordeon ist zusammengebrochen, so dass diese Ereignisse wird nicht funktionieren, deaktivieren Sie die Systemsteuerung[Akkordeon].

    InformationsquelleAutor DevelopZen
  2. 0

    Habe ich einen kleinen trick, den ich nur heute auf der Arbeit :

    leeren Sie einfach das data-toggle-Attribut.

    Ich weiß nicht, ob es ordentlich ist oder nicht, aber es funktioniert

    JS:

      $("#disablePanels").on("click",function(){
	$(".accordion-toggle").attr("data-toggle", "");
  });
  
    $("#enablePanels").on("click",function(){
		$(".accordion-toggle").attr("data-toggle", "collapse");
  });

    HTML:

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

    InformationsquelleAutor PhilMaGeo
Schreibe einen Kommentar