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

我有一个页面，上面有多个按钮，有多张幻灯片，点击按钮时打开

但当另一个侧面板打开时，它们不会自动关闭。我必须手动关闭它们

你能帮忙吗

下面是与之相关的代码

HTML

JQUERY

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

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

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

试试这个

    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

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”）；
函数openPanel（x）{
x、 添加（“可见”）
}
功能关闭面板（x）{
返回x.classList.remove（“可见”）；
}
功能面板单击（x）{
对于（var i=0；i<3；i++）{
如果（x==面板[i]）继续；
event.preventDefault（）；
封闭面板（面板[i]）；
}
}
功能btOpen（x）{
var index=[].indexOf.call（BTN，x）；
对于（变量i=0；i<3；i++）{
if（i==索引）openPanel（panels[i]）；else closePanel（panels[i]）；
}
}
forEach（函数（x）{x.onclick=function（）{panelClick（this）}）；
forEach（函数（x）{x.onclick=function（）{btOpen（this）}）
//这应该行得通。我试过了，效果很好。我不熟悉jQuery，这就是为什么没有看到任何jQuery脚本的原因。但是，您可以用jQuery脚本替换该脚本。
//如果您不理解上面的脚本，请在注释中说明，这样我将帮助您理解代码。希望能有帮助

试试这个

    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

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”）；
函数openPanel（x）{
x、 添加（“可见”）
}
功能关闭面板（x）{
返回x.classList.remove（“可见”）；
}
功能面板单击（x）{
对于（var i=0；i<3；i++）{
如果（x==面板[i]）继续；
event.preventDefault（）；
封闭面板（面板[i]）；
}
}
功能btOpen（x）{
var index=[].indexOf.call（BTN，x）；
对于（变量i=0；i<3；i++）{
if（i==索引）openPanel（panels[i]）；else closePanel（panels[i]）；
}
}
forEach（函数（x）{x.onclick=function（）{panelClick（this）}）；
forEach（函数（x）{x.onclick=function（）{btOpen（this）}）
//这应该行得通。我试过了，效果很好。我不熟悉jQuery，这就是为什么没有看到任何jQuery脚本的原因。但是，您可以用jQuery脚本替换该脚本。
//如果您不理解上面的脚本，请在注释中说明，这样我将帮助您理解代码。希望能有帮助

更改

• 为每个面板添加了id
• 为每个按钮添加了数据id
• 将jQuery压缩为一个两个函数（只记得关闭按钮）
• 如果单击一个按钮
  • 所有打开的面板将关闭
  • 按钮的数据id将与其中一个面板的id匹配
  • 那个特定的面板将打开
• 添加了引导，以便更好地查看按钮

一小条

//NVV
$（文档）.ready（函数（）{
//打开侧面板
$（'.cd btn'）。在（'click'，函数（事件）{
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'）。在（'click'，函数（事件）{
$（'.cd panel'）.removeClass（'is-visible'）；
});
});
});
.cd主要内容.cd btn{
位置：相对位置；
显示：内联块；
背景色：#89ba2c；
颜色：#000；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
框阴影：插入0 1px 0 rgba（255,255,255,0.5），0 0 5px rgba（0,0,0,0.1）；
-webkit转换：所有0.2秒；
-moz转换：全部为0.2s；
过渡：均为0.2s；
}
.禁止触摸。cd主要内容。cd btn:悬停{
光标：指针；
-moz盒阴影：插入0 1px 0 rgba（255,255,255,0.5），0 0 20px rgba（0,0,0,0.3）；
-webkit盒阴影：插入0 1px 0 rgba（255，255，255，0.5），0 0 20px rgba（0，0，0，0.3）；
框阴影：插入0 1px 0 rgba（255，255，255，0.5），0 0 20px rgba（0，0，0，0.3）；
}
.cd面板{
位置：固定；
排名：0；
左：0；
可见性：隐藏；
-webkit转换：可见性0.6s；
-moz转换：可见性0s0.6s；
过渡：能见度0.6秒；
字体系列：“开放式Sans”，无衬线；
z指数：9；
}
.cd面板：：之后{
/*覆盖层*/
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：透明；
光标：指针；
-webkit转换：背景0.3s 0.3s；
-moz转换：背景0.3s 0.3s；
过渡：背景0.3s 0.3s；
}
.cd-panel.is-visible{
能见度：可见；
-webkit转换：可见性0s0s；
-moz转换：可见性0s0s；
过渡：能见度0.0s；
}
.cd面板。可见：：之后{
背景：rgba（0,0,0,0.6）；
-webkit转换：背景0.3s 0s；
-moz转换：背景0.3s0s；
过渡：背景0.3s 0s；
}
.cd-panel.is-visible.cd-panel close:：before{
-webkit动画：cd-close-10.6s0.3s；
-moz动画：cd-close-10.6s0.3s；
动画：cd-close-1 0.6s 0.3s；
}
.cd-panel.is-visible.cd-panel close:：after{
-webkit动画：cd-close-20.6s0.3s；
-moz动画：cd-close-20.6s0.3s；
动画：cd-close-20.6s0.3s；
}
//议员
.cd主要内容.cd btn mp{
位置：相对位置；
显示：内联块；
背景色：#89ba2c；
颜色：#000；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
方框阴影：插入0 1px 0 rgba（255
//NVV
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();
        }
    });
});

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

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

    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

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