在同一页的不同部分的不同部分的不同幻灯片

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可见

.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，它应该给你一些亮点。