Функциональность закрытия не работает должным образом

Question

У меня есть несколько кнопок в проекте, которые открывают несколько боковых панелей. Если щелкнуть значок плюс, он откроет боковую панель, которую можно закрыть с помощью значка минус, а также кнопку закрытия на боковой панели.

Значок переключится на минус и плюс.

Но когда я нажимаю на второй плюс, открывается вторая панель, но первая панель не закрывается - она ​​просто закрывается второй панелью.

Для этого см. 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

Вам просто нужно добавить дополнительный, если заявление 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