Question

我正在努力学习jquery，所以请原谅我缺乏知识。好吧，我想要实现的是一个包含多个部分的页面。每个部分将是100vh，并将有一个背景图像和一个按钮。按钮应该从左侧滑动面板。我找到了一个完美的代码。当我尝试在同一页面的另一部分重复相同时，问题就开始了。然后只有第一张幻灯片可以正常工作而没有其他幻灯片。

我试图在div中提供不同的名字，甚至在不同的类中也没有运气。有谁可以帮忙吗？提前谢谢！

这是原始代码

 jQuery(document).ready(function($){
 //open the lateral panel
 $('.cd-btn').on('click', function(event){
    event.preventDefault();
    $('.cd-panel').addClass('is-visible');
 });
 //clode 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();
    }
});
});

这是HTML

<main class="cd-main-content">
    <h1>Slide In Panel</h1>
    <a href="#0" class="cd-btn">Fire Panel</a>
    <!-- your content here -->
</main>

  <div class="cd-panel1 from-left is-visible">
    <header class="cd-panel-header">
        <h1>Title Goes Here</h1>
        <a href="#0" class="cd-panel-close">Close</a>
    </header>

    <div class="cd-panel-container">
        <div class="cd-panel-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. /p>

        </div> <!-- cd-panel-content -->
    </div> <!-- cd-panel-container -->

CSS for是可见的

 .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: 0s;
 -moz-transition-delay: 0s;
 transition-delay: 0s;
 }

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

Answer 1

您的代码不完整。但是，这里有一些解释来获得您正在寻找的结果。

首先，为了在不同的地方拥有它，您需要另一个按钮来触发面板的显示。您可以拨打第一个按钮.btn1和第二个.btn2，同时为面板提供不同的课程。

请参阅此fiddle，它应该会给你一些启发。

不同的幻灯片面板位于同一页面的不同部分

1 个答案: