mehrere Sidepanels Übergang Javascript

Question

Ich habe mehrere Sidepanels mit mehreren Tasten auf meiner Seite verknüpft.

Grundsätzlich, wenn ich auf eine Schaltfläche klicke, sollte ein Panel geöffnet werden und wenn ich auf die zweite Schaltfläche klicke, sollte das erste Panel schließen und das zweite Panel sollte geöffnet werden.

Ich habe 9 solche Panels.

Derzeit jQuery verwenden, es zu erreichen auch das ist, wie ich die Seitenverkleidung verwendet https://codyhouse.co/demo/slide-in-panel/index.html

Wenn jemand es wäre toll helfen kann.

<div class="cd-panel from-right"> 
       <header class="cd-panel-header"> 
        <a href="#0" class="cd-panel-close">Close</a> 
       </header> 
       <div class="cd-panel-container"> 
Content 
     </div> 
    </div> 

jQuery(document).ready(function($){ 
    //open the lateral panel 
    $('.cd-btn').on('click', function(event){ 
     event.preventDefault(); 
     $('.cd-panel').addClass('is-visible'); 
    }); 
    //close the lateral panel 
    $('.cd-panel').on('click', function(event){ 
     if($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) { 
      $('.cd-panel').removeClass('is-visible'); 
      event.preventDefault(); 
     } 
    }); 
}); 

Knopf

<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i"></i> 

Answer 1

die anderen Seitenteil Klassen Durch das Hinzufügen der Klasse $ ('cD-Panel-a.) removeClass (' ist sichtbare') zu entfernen.

jQuery(document).ready(function($){ 
    //open the lateral panel 
    $('.cd-btn').on('click', function(event){ 
     event.preventDefault(); 
     $('.cd-panel').addClass('is-visible'); 
     $('.cd-panel-a').removeClass('is-visible');  
    }); 
    //close the lateral panel 
    $('.cd-panel').on('click', function(event){ 
     if($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) { 
      $('.cd-panel').removeClass('is-visible'); 
      event.preventDefault(); 
     } 
    }); 
}); 

Answer 2

Sie diese mit einigen jQuery erreichen kann, ich habe versucht, möglichst dynamisch die unten zu schreiben zu sein, die Daten- Verwendung * Attribut.

Ich habe den Code aus dem Artikel entnommen Sie zur Verfügung gestellt, aber sieht aus wie ein Teil der CSS wird aus diesem Artikel fehlt ..

Edit: Mit dem Code, den Sie zur Verfügung gestellt haben ...

jQuery(document).ready(function($) { 
 
    //open the lateral panel 
 
    $('.cd-btn').on('click', function(event) { 
 
    \t // close any previously opened panels 
 
    \t $('.cd-panel').removeClass('is-visible'); 
 
    
 
    \t // get the number of the panel to show from the data-panel attribute on the button 
 
    \t var panelToShow = $(this).data('panel'); 
 
    
 
    event.preventDefault(); 
 
    // add the is-visible class to the panel with the data-panel attribute value matching that of the button 
 
    $('.cd-panel[data-panel="' + panelToShow + '"]').addClass('is-visible'); 
 
    }); 
 
    //close the lateral panel 
 
    $('.cd-panel').on('click', function(event) { 
 
    if ($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) { 
 
     $('.cd-panel').removeClass('is-visible'); 
 
     event.preventDefault(); 
 
    } 
 
    }); 
 
});

.cd-panel { 
 
    visibility: hidden 
 
} 
 

 
.is-visible { 
 
    visibility: visible 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cd-panel from-right" data-panel="1"> 
 
    <header class="cd-panel-header"> 
 
    <a href="#0" class="cd-panel-close">Close</a> 
 
    </header> 
 
    <div class="cd-panel-container"> 
 
    Panel 1 
 
    </div> 
 
</div> 
 

 
<div class="cd-panel from-right" data-panel="2"> 
 
    <header class="cd-panel-header"> 
 
    <a href="#0" class="cd-panel-close">Close</a> 
 
    </header> 
 
    <div class="cd-panel-container"> 
 
    Panel 2 
 
    </div> 
 
</div> 
 

 
<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i" data-panel="1">Show Panel 1</i><br /> 
 
<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i" data-panel="2">Show Panel 2</i>