关闭功能不能正常工作

我在项目中有多个按钮，打开多个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(); 
     } 
    }); 
});

来源

2016-11-07 Bob

它似乎工作正常。 –

@ScottMarcus不，它没有，问题是打开第二个菜单时，第一个菜单没有关闭。 –

@KevinKloet啊，我误解了这个问题。我编辑它更清楚。 –

检查更新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(); 
     } 
    }); 
});

希望这有助于！

来源

2016-11-07 16:11:34

完美@saurav感谢您的快速帮助。这就是我想要的欢呼！ – Bob

@Bob我的荣幸！ –

嗨@saurav万一我有超过两个sidepanels像下面的更新[小提琴]（https://jsfiddle.net/ bob_js/cpagL7qz/13 /）你能否请帮忙 – Bob

你只需要增加一个额外的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

来源

2016-11-07 16:09:39

嘿@Nikhil，我已经在我的项目中实现了。但在这里，如果您可以看到我点击第一个图标，它会从加号变为减号，然后如果第二个图标被点击，它不会再次将第一个图标更改为加号。 – Bob

不，你添加的地方（我认为它的$（'.cd-panel-a'）。on（'click'，'）甚至没有在页面上呈现，因此它甚至没有被调用。 –

关闭功能不能正常工作

回答

相关问题