關閉功能不能正常工作

Question

我在項目中有多個按鈕，打開多個sidepanels。 如果我們點擊加號圖標，它會打開側面板，可以使用減號圖標以及側面板上的關閉按鈕關閉側面板。

圖標會切換爲負號和正號。

但是當我點擊第二個加號圖標時，第二個面板會打開，但第一個面板不會關閉 - 它會被第二個面板覆蓋。

請參閱JSfiddle。 https://jsfiddle.net/bob_js/cpagL7qz/1/

HTML

<i class="glyphicon glyphicon-plus-sign cd-btn-a abc"></i> 
<div class="container"> 
    <i class="glyphicon glyphicon-plus-sign cd-btn"></i> 
</div> 
<div class="cd-panel from-right"> 
      <header class="cd-panel-header"> 
       <a href="#0" class="cd-panel-close"></a> 
      </header> 
      <div class="cd-panel-container"> 
     Content 
    </div> 
</div> 
<div class="cd-panel-a from-right"> 
      <header class="cd-panel-header"> 
       <a href="#0" class="cd-panel-close"></a> 
      </header> 
      <div class="cd-panel-container color"> 
     Content 
    </div> 
</div> 

CSS：

.color{ 
    background-color: green !important; 
} 
.glyphicon-plus-sign, .glyphicon-minus-sign{ 
    top: 30%; 
    position: absolute !important; 
    z-index: 1; 
    color: rgb(255, 133, 102); 
    background-color: #fff; 
    border-radius: 50%; 
    border: 1px solid #fff; 
    cursor: pointer; 
    -webkit-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
} 
.glyphicon-plus-sign:hover, .glyphicon-minus-sign:hover { 
    -webkit-transform: scale(1.3); 
    transform: scale(1.3); 
} 
*, *::after, *::before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

*::after, *::before { 
    content: ''; 
} 

a { 
    color: #89ba2c; 
    text-decoration: none; 
} 
.cd-main-content { 
    text-align: center; 
} 
.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 { 
    -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-main-content .cd-btn-val { 
    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-val:hover { 
    -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; 
} 


@-webkit-keyframes cd-close-1 { 
    0%, 50% { 
    -webkit-transform: rotate(0); 
    } 
    100% { 
    -webkit-transform: rotate(45deg); 
    } 
} 
@-moz-keyframes cd-close-1 { 
    0%, 50% { 
    -moz-transform: rotate(0); 
    } 
    100% { 
    -moz-transform: rotate(45deg); 
    } 
} 
@keyframes cd-close-1 { 
    0%, 50% { 
    -webkit-transform: rotate(0); 
    -moz-transform: rotate(0); 
    -ms-transform: rotate(0); 
    -o-transform: rotate(0); 
    transform: rotate(0); 
    } 
    100% { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
} 
@-webkit-keyframes cd-close-2 { 
    0%, 50% { 
    -webkit-transform: rotate(0); 
    } 
    100% { 
    -webkit-transform: rotate(-45deg); 
    } 
} 
@-moz-keyframes cd-close-2 { 
    0%, 50% { 
    -moz-transform: rotate(0); 
    } 
    100% { 
    -moz-transform: rotate(-45deg); 
    } 
} 
@keyframes cd-close-2 { 
    0%, 50% { 
    -webkit-transform: rotate(0); 
    -moz-transform: rotate(0); 
    -ms-transform: rotate(0); 
    -o-transform: rotate(0); 
    transform: rotate(0); 
    } 
    100% { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 
} 
.cd-panel-header { 
    position: fixed; 
    height: 27px; 
    width: 3%; 
    background-color: transparent; 
    z-index: 2; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0); 
    -webkit-transition: top 1.3s 0s; 
    -moz-transition: top 1.3s 0s; 
    transition: top 1.3s 0s; 
} 
.from-right .cd-panel-header, .from-left .cd-panel-header { 
    top: -50px; 
} 
.from-right .cd-panel-header { 
    right: 20px; 
} 
.from-left .cd-panel-header { 
    left: 0; 
} 
.is-visible .cd-panel-header { 
    top: 0; 
    -webkit-transition: top 1.3s 0.3s; 
    -moz-transition: top 1.3s 0.3s; 
    transition: top 1.3s 0.3s; 
} 

@media only screen and (min-width: 1471px) { 
    .cd-panel-header { 
    height: 30px; 
    } 
} 

.cd-panel-close { 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    width: 40px; 
    /* image replacement */ 
    display: inline-block; 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
} 
.cd-panel-close::before, .cd-panel-close::after { 
    /* close icon created in CSS */ 
    position: absolute; 
    top: 11px; 
    left: 20px; 
    height: 3px; 
    width: 15px; 
    background-color: #fff; 
    /* this fixes a bug where pseudo elements are slighty off position */ 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
.cd-panel-close::before { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
.cd-panel-close::after { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 
.no-touch .cd-panel-close:hover { 
    background-color: transparent; 
} 
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { 
    background-color: #ffffff; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
.no-touch .cd-panel-close:hover::before { 
    -webkit-transform: rotate(220deg); 
    -moz-transform: rotate(220deg); 
    -ms-transform: rotate(220deg); 
    -o-transform: rotate(220deg); 
    transform: rotate(220deg); 
} 
.no-touch .cd-panel-close:hover::after { 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -ms-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
} 

.cd-panel-container { 
    position: fixed; 
    height: 100%; 
    top: 0; 
    background: #901818; 
    border-left: 1px solid #c8cacc; 
    z-index: 1; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    transition-property: transform; 
    -webkit-transition-duration: 1.8s; 
    -moz-transition-duration: 1.8s; 
    transition-duration: 1.8s; 
    -webkit-transition-delay: 0.3s; 
    -moz-transition-delay: 0.3s; 
    transition-delay: 0.3s; 
    z-index: 1; 
    overflow-y: auto; 
} 
.from-right .cd-panel-container { 
    right: 0; 
    -webkit-transform: translate3d(100%, 0, 0); 
    -moz-transform: translate3d(100%, 0, 0); 
    -ms-transform: translate3d(100%, 0, 0); 
    -o-transform: translate3d(100%, 0, 0); 
    transform: translate3d(100%, 0, 0); 
} 
.from-left .cd-panel-container { 
    left: 0; 
    -webkit-transform: translate3d(-100%, 0, 0); 
    -moz-transform: translate3d(-100%, 0, 0); 
    -ms-transform: translate3d(-100%, 0, 0); 
    -o-transform: translate3d(-100%, 0, 0); 
    transform: translate3d(-100%, 0, 0); 
} 
.is-visible .cd-panel-container { 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    -webkit-transition-delay: 0.3s; 
    -moz-transition-delay: 0.3s; 
    transition-delay: 0.3s; 
} 
@media only screen and (min-width: 768px) { 
    .cd-panel-container { 
    width: 30.5%; 
    } 
} 
@media only screen and (min-width: 1271px) { 
    .cd-panel-container { 
    width: 23.5%; 
    } 
} 
@media only screen and (min-width: 1471px) { 
    .cd-panel-container { 
    width: 23.5%; 
    } 
} 

jQuery的

$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){ 
    $(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign"); 
}); 


jQuery(function($){ 
    //open the lateral panel 
    $('.cd-btn').on('click', function(event){ 
     event.preventDefault(); 
     $('.cd-panel').toggleClass('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'); 
      $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign"); 
      event.preventDefault(); 
     } 
    }); 
}); 

jQuery(function($){ 
    //open the lateral panel 
    $('.cd-btn-a').on('click', function(event){ 
     event.preventDefault(); 
     $('.cd-panel-a').toggleClass('is-visible'); 
    }); 
    //close the lateral panel 
    $('.cd-panel-a').on('click', function(event){ 
     if($(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close')) { 
      $('.cd-panel-a').removeClass('is-visible'); 
      $('.cd-btn-a').toggleClass("glyphicon-minus-sign glyphicon-plus-sign"); 
      event.preventDefault(); 
     } 
    }); 
}); 

Answer 1

檢查更新Fiddle

您需要檢查它的JS：

$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){ 
    $(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign"); 
}); 


jQuery(function($){ 
    //open the lateral panel 
    $('.cd-btn').on('click', function(event){ 
     event.preventDefault(); 
     $('.cd-panel').toggleClass('is-visible'); 
    // CHECKING ICON OF .cd-btn-a 
    if($('.cd-btn-a').hasClass('glyphicon-minus-sign')) { 
     $('.cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign'); 
     $('.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'); 
      $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign"); 
      event.preventDefault(); 
     } 
    }); 
}); 

jQuery(function($){ 
    //open the lateral panel 
    $('.cd-btn-a').on('click', function(event){ 
     event.preventDefault(); 
     $('.cd-panel-a').toggleClass('is-visible'); 
    // CHECKING ICON OF .cd-btn 
    if($('.cd-btn').hasClass('glyphicon-minus-sign')) { 
     $('.cd-btn').toggleClass('glyphicon-minus-sign glyphicon-plus-sign'); 
     $('.cd-panel').removeClass('is-visible'); 
    } 
    }); 
    //close the lateral panel 
    $('.cd-panel-a').on('click', function(event){ 
     if($(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close')) { 
      $('.cd-panel-a').removeClass('is-visible'); 
      $('.cd-btn-a').toggleClass("glyphicon-minus-sign glyphicon-plus-sign"); 
      event.preventDefault(); 
     } 
    }); 
}); 

希望這有助於！

Answer 2

你只需要增加一個額外的if語句的onclick的圖標，以檢查是否有其他面板可見或不可見（使用您的is-visible類）。修改代碼以這種

$('.cd-btn').on('click', function(event){ 
    event.preventDefault(); 
    $('.cd-panel').toggleClass('is-visible'); 
    // added below 3 lines 
    if($('.cd-panel-a').hasClass('is-visible')) { 
     $('.cd-panel-a').removeClass('is-visible'); 
    } 
}); 

$('.cd-btn-a').on('click', function(event){ 
    event.preventDefault(); 
    $('.cd-panel-a').toggleClass('is-visible'); 
    // added below 3 lines 
    if($('.cd-panel').hasClass('is-visible')) { 
     $('.cd-panel').removeClass('is-visible'); 
    } 
}); 

Your Fiddle updated