HTML – Mostra/Nascondi Pulsanti sul Pannello di Bootstrap per comprimere/espandere

Sto usando un Bootstrap pieghevole pannello.
Ecco il Fidle per

Sto cercando di effettuare le seguenti operazioni :

  1. Voglio spostare entrambi i pulsanti del Pannello di intestazione(all’estremo
    estremità destra) cioè esattamente di fronte al testo “Pannello”

  2. Ma io voglio solo i pulsanti visibili quando il pannello è ampliato. E
    quando il pannello è nascosto i pulsanti devono essere nascoste.

Come posso raggiungere questo obiettivo. Quale sarebbe il JS per questo?

Ho provato a eseguire le operazioni seguenti in JS:

$(document).ready(function () {        
        $("#btnSearch").hide();
         $(".panel-title").click(function () {         
             $("#btnSearch").show();            
      });
});

Ma con questo i pulsanti non riesce a nascondere quando il pannello è fatto per nascondere.

  • aggiungere il codice completo
  • entrambi pulsante orizzontale livelli di “panel” ?
  • Beh, la maggior parte di voi hanno quasi dato la soluzione giusta per realizzare la mia richiesta. Ma c’è un problema però : facendo Clic con il pulsante provoca il pannello per nascondere. Questo non dovrebbe essere il caso. C’è un modo per evitare che il pannello da nascondere?
InformationsquelleAutor Mr.SK | 2016-12-27



4 Replies
  1. 9

    Provare questo. Ho spostato i pulsanti su pannello di intestazione di sé e posizionato utilizzando position:absolute;.

    È molto simile a questo bootsnipp

    JS:

    $(".panel-success").on('show.bs.collapse', function() {
        $('.buttonCon').addClass('vis');
    }).on('hide.bs.collapse', function() {
        $('.buttonCon').removeClass('vis');
    })

    CSS:

    .panel{
      position:relative;
    }
    .buttonCon{
      position:absolute;
      top:5px;
      right:10px;
      display:none;
    }
    .buttonCon.vis{
      display:block;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
      <div class="panel panel-success">
        <div class="buttonCon">
            <button type="button" class="btn btn-primary" onclick="ReloadData()">
                Button1
                <span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
              </button>
              <button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
                Buttonn2
                <span class="glyphicon glyphicon-remove"></span>
              </button>
            </div>
        <div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
          <div class="panel-title">
            <span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;Panel
            </div>
        </div>
        <div class="panel-body collapse" id="body">
          <div class="form-group row">
            <label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
            <div class="col-md-2">
              <input class="form-control roundedElement" type="text" id="txt1" />
            </div>
    
            <label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
            <div class="col-md-2">
              <input class="form-control roundedElement" type="text" id="txt2" />
            </div>
    
            <label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
            <div class="col-md-2">
              <input class="form-control roundedElement" type="text" id="txt3" />
            </div>
          </div>
    
          <div class="form-group row" style="margin-left:auto;margin-right:auto;">
            <div class="col-md-2 col-md-offset-5">
              
            </div>
          </div>
    
        </div>
      </div>
    </div>

    • Se si fa doppio clic sul pannello c’è una possibilità per i pulsanti vengono visualizzati quando il pannello è compresso o scompaiono quando gli viene mostrato il pannello. Questo è il tipo di una condizione di competizione e, potenzialmente, questa risposta possa causare più problemi nel lungo periodo.
    • grazie BuddhistBeast per il vostro prezioso feedback. Ho aggiornato la mia risposta
    • Funziona bene. Ma c’è un problema però : Cliccando su questi pulsanti determina il pannello per nascondere. Questo non dovrebbe essere il caso. C’è un modo per evitare che il pannello da nascondere?
    • ok. fammi controllare. potete per favore darmi 5-10 minuti
    • ok. Ho aggiornato la risposta. è possibile controllare ora. Se si risolve il problema. potete per favore accetta la mia risposta.
  2. 3

    È possibile utilizzare bootstrap crollo eventi per raggiungerlo.

    $('#accordion').on('shown.bs.collapse', function() {
      $(".buttons").show();
    })
    $('#accordion').on('hidden.bs.collapse', function() {
      $(".buttons").hide();
    })

    Controllare questo violino.

  3. 3

    Seguenti JsFiddle è un’altra opzione rispetto alle risposte già date.

    Soprattutto, impedisce l’uso di position: absolute, che può risultare in un miscuglio di cose brutte accadono. I seguenti jQuery (che è prontamente disponibile, dal momento che si sta utilizzando bootstrap) funzionerà:

    $("#js-panel").on('show.bs.collapse', function() {
        $('.js-toggle-btn').removeClass('hide');
    }).on('hide.bs.collapse', function() {
        $('.js-toggle-btn').addClass('hide');
    })

    Prendere atto che non ci sono eventi per tenere traccia se un pannello è attualmente di apertura o di chiusura (più altri due), che può essere trovato qui.

    Vorrei anche suggerire che si prende il tempo di leggere alcune delle documentazione e gli esempi che si trovano sul bootstrap pagina web, solo perché un sacco di css/html è abbastanza ruvida/inutilmente complesso.

  4. 1

    Capito di lavoro combinando le risposte fornite da @kittyCat (la soluzione aggiornata) e @BuddhistBeast .

    Ecco il Violino.

    Codice HTML :

    <div class="container">
      <div class="panel panel-success" id="js-panel">
    
        <div class="panelButtons">
          <button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
            Button2
            <span class="glyphicon glyphicon-remove"></span>
          </button>
          <button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
            Button1
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </div>
    
        <div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
          <div class="panel-title">
            <span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;Panel
          </div>
        </div>
    
        <div class="panel-body collapse" id="body">
          <div class="form-group row">
            <label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
            <div class="col-md-2">
              <input class="form-control roundedElement" type="text" id="txt1" />
            </div>
    
            <label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
            <div class="col-md-2">
              <input class="form-control roundedElement" type="text" id="txt2" />
            </div>
    
            <label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
            <div class="col-md-2">
              <input class="form-control roundedElement" type="text" id="txt3" />
            </div>
          </div>
        </div>
    
      </div>
    </div>

    Codice JS :

    $("#js-panel").on('show.bs.collapse', function() {
      $('.js-toggle-btn').removeClass('hide');
    }).on('hide.bs.collapse', function() {
      $('.js-toggle-btn').addClass('hide');
    })
    • Ha voluto accettare entrambe le risposte, ma posso solo selezionare le. Quindi ho accettato l’aggiornamento della soluzione fornita da @kittyCat come si risolve il problema di pannello di nascosto sul pulsante fare clic su

Lascia un commento