侧板应该一个接一个地关闭和打开

试试这个

    var panels = [document.querySelector(".cd-panel"), document.querySelector(".cd-panel-mp"), document.querySelector(".cd-panel-ha")];
    var btns = [document.querySelector(".cd-btn"), document.querySelector(".cd-btn-mp"), document.querySelector(".cd-btn-ha")];
    function openPanel(x) {
        x.classList.add("is-visible")
    }
    function closePanel(x) {
        return x.classList.remove("is-visible");
    }
    function panelClick(x) {
        for (var i = 0; i < 3; i++){ 
            if(x === panels[i]) continue;
            event.preventDefault();
            closePanel(panels[i]);
        }
    }
    function btOpen(x) {
        var index = [].indexOf.call(btns, x);
        for (var i = 0; i < 3; i++) {
            if (i === index) openPanel(panels[i]); else closePanel(panels[i]);
        }
    }
    panels.forEach(function (x) { x.onclick = function () { panelClick(this) }});
    btns.forEach(function (x) { x.onclick = function () { btOpen(this) } })
  //This should work. I tried it and it works. I am not familiar with jQuery, that is why do not see any jQuery script. However, you can replace the script with jQuery script.
 //If you do not understand a script above, tell it in a comment, so i wil help you understand the code. Hope it helps

变化

• 为每个面板添加id
• 为每个按钮添加data-id
• 将jQuery压缩为
一个两个函数(只记得关闭按钮)
• 按钮被点击
  • 所有打开的面板将关闭
  • 按钮的data-id将与其中一个面板的id匹配。
  • 该特定面板将打开
• 添加了Bootstrap以便更好地看到按钮。

片段

//NVV
$(document).ready(function() {
  //open the lateral panel
  $('.cd-btn').on('click', function(event) {
    var tgr = $(this).data('id');
    var tgt = $('.cd-main-content').find('#' + tgr);
    event.preventDefault();
    $('.cd-panel').removeClass('is-visible');
    tgt.addClass('is-visible');
    $('.cd-panel-close').on('click', function(event) {
      $('.cd-panel').removeClass('is-visible');
    });
  });
});

.cd-main-content .cd-btn {
  position: relative;
  display: inline-block;
  background-color: #89ba2c;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
  cursor: pointer;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
  font-family: 'Open Sans', sans-serif;
  z-index: 9;
}
.cd-panel::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
  -moz-animation: cd-close-1 0.6s 0.3s;
  animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
  -moz-animation: cd-close-2 0.6s 0.3s;
  animation: cd-close-2 0.6s 0.3s;
}
//MP
.cd-main-content .cd-btn-mp {
  position: relative;
  display: inline-block;
  background-color: #89ba2c;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-mp:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel-mp {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
  font-family: 'Open Sans', sans-serif;
  z-index: 9;
}
.cd-panel-mp::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel-mp.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-panel-mp.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.cd-panel-mp.is-visible .cd-panel-close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
  -moz-animation: cd-close-1 0.6s 0.3s;
  animation: cd-close-1 0.6s 0.3s;
}
.cd-panel-mp.is-visible .cd-panel-close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
  -moz-animation: cd-close-2 0.6s 0.3s;
  animation: cd-close-2 0.6s 0.3s;
}
//HA
.cd-main-content .cd-btn-ha {
  position: relative;
  display: inline-block;
  background-color: #89ba2c;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-ha:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel-ha {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
  font-family: 'Open Sans', sans-serif;
  z-index: 9;
}
.cd-panel-ha::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel-ha.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-panel-ha.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.cd-panel-ha.is-visible .cd-panel-close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
  -moz-animation: cd-close-1 0.6s 0.3s;
  animation: cd-close-1 0.6s 0.3s;
}
.cd-panel-ha.is-visible .cd-panel-close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
  -moz-animation: cd-close-2 0.6s 0.3s;
  animation: cd-close-2 0.6s 0.3s;
}
.control {
  margin: 200px 0 0 50px;
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<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>
<div class='no-touch'>
  <main class="cd-main-content row">
    <div class="cd-panel from-right col-4-md" id='nvv-i'>
      <header class="cd-panel-header">
        <a href="#0" class="cd-panel-close">Close</a>
      </header>
      <div class="cd-panel-container">
        CONTENT NVV __ __
      </div>
    </div>
    <div class="cd-panel from-right col-4-md" id='mp-i'>
      <header class="cd-panel-header">
        <a href="#0" class="cd-panel-close">Close</a>
      </header>
      <div class="cd-panel-container">
        CONTENT ___ MP __
      </div>
    </div>
    <div class="cd-panel from-right col-4-md" id='ha-i'>
      <header class="cd-panel-header">
        <a href="#0" class="cd-panel-close">Close</a>
      </header>
      <div class="cd-panel-container">
        CONTENT ___ __ HA
      </div>
    </div>
    <fieldset class="control btn-group">
      <i class="glyphicon glyphicon-plus-sign cd-btn btn" data-id="nvv-i"></i>
      <i class="glyphicon glyphicon-plus-sign cd-btn btn" data-id="mp-i"></i>
      <i class="glyphicon glyphicon-plus-sign cd-btn btn" data-id="ha-i"></i>
    </fieldset>
  </main>
</div>

我通过将remove类添加到每个查询中来实现解决方案，反之亦然，如下所示:它帮助了我

jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').addClass('is-visible');
 $('.cd-panel-bc, .cd-panel-ab').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();
        }
    });
});

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

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