javascript - 多个侧面板过渡 javascript

Question

我的页面上有多个侧面板链接到多个按钮。

基本上，当我单击一个按钮时，应打开一个面板，当我单击第二个按钮时，应关闭第一个面板并打开第二个面板。

我有 9 个这样的面板。

目前使用 jQuery 来实现它，这也是我使用侧面板的方式 https://codyhouse.co/demo/slide-in-panel/index.html

如果有人能提供帮助，那就太好了。

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

按钮

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

Answer 1

您可以使用一些 jQuery 来实现此目的，我尝试利用 data-* 属性将下面的内容编写得尽可能动态。

我从您提供的文章中获取了代码，但看起来该文章中缺少一些 CSS。

编辑:使用您提供的代码...

jQuery(document).ready(function($) {
  //open the lateral panel
  $('.cd-btn').on('click', function(event) {
  	// close any previously opened panels
  	$('.cd-panel').removeClass('is-visible');
  
  	// get the number of the panel to show from the data-panel attribute on the button
  	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>