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

时间：2016-10-21 21:48:21

标签： javascript jquery css

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

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

你能帮忙吗？

以下是与之相关的代码。

HTML 

<div class="cd-panel from-right"> 
            <header class="cd-panel-header">
                <a href="#0" class="cd-panel-close">Close</a>
            </header>
            <div class="cd-panel-container">
</div>
</div>
<div class="cd-panel-mp from-right"> 
            <header class="cd-panel-header">
                <a href="#0" class="cd-panel-close">Close</a>
            </header>
            <div class="cd-panel-container">
</div>
</div>
<div class="cd-panel-ha from-right"> 
            <header class="cd-panel-header">
                <a href="#0" class="cd-panel-close">Close</a>
            </header>
            <div class="cd-panel-container">
</div>
</div>

HTML按钮

<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i"></i>

<i class="glyphicon glyphicon-plus-sign cd-btn-mp" id="mp-i"></i>

<i class="glyphicon glyphicon-plus-sign cd-btn-ha" id="ha-i"></i>

CSS 

.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-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;
}

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

3 个答案:

答案 0 :(得分：1)

试试这个

sorted_grid = grid_search.get_grid(sort_by='auc',decreasing=True)
print(sorted_grid)

答案 1 :(得分：1)

更改

  • 为每个面板添加了ID
  • 为每个按钮添加了data-id
  • 将jQuery简化为一个两个函数（只记得关闭按钮）
  • 如果单击按钮
    • 所有打开的面板将关闭
    • 按钮的data-id将与其中一个面板的ID匹配。
    • 该特定小组将打开
  • 添加了Bootstrap以便更好地查看按钮。

段

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page first active">first page</div>
<div class="page second">second page</div>
<div class="page third">third page</div>
<button class="next">Next</button>
＆＃13; 
//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');
    });
  });
});
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我通过向每个查询添加删除类来实现解决方案，反之亦然，如下所示： 它帮助了我

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();
        }
    });
});
相关问题
最新问题