在同一頁的不同部分的不同部分的不同幻燈片

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，它應該給你一些亮點。