我使用下面的javascript在我的網站上隱藏和顯示一個注冊表單，它非常適合一個表單。當我想在一頁上顯示更多這些內容時，麻煩就來了。

<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e){
e.preventDefault();jQuery("#reveal").slideToggle(1000);
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>

CSS是

.rv_button.closed:after {content:"\33";}
.rv_button.opened:after{content:"\32";}

我向觸發切換的按鈕添加了類“rv_button closed ”,并向表單本身添加了ID“reveal”。

我想使用相同的效果來隱藏和顯示一個網頁上的博客文章列表，但它不工作。我試著給按鈕添加一個ID而不是一個類，因為它們不是唯一的項目，但這也不起作用。

有沒有辦法調整代碼來幫助我實現這一點？

如果沒有看到你的HTML結構，這個問題很難回答，但是你可以為你的div創建一個包裝器。然后，您可以檢查按鈕被單擊的是哪個包裝器，并在該特定包裝器中操作元素。

$(document).ready(function() {
  $('.rv_button').click(function() {
    $wrapper = $(this).closest('.wrapper');
    $wrapper.find('.reveal').slideToggle(1000);
    $(this).toggleClass('opened closed');
  });
});

.wrapper { margin-bottom: 15px; }
.reveal { display: none; }
.rv_button.closed:after { content:"\25BD"; }
.rv_button.opened:after{ content:"\25B3"; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="reveal">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim congue pharetra. Morbi neque urna, vestibulum vel fringilla ac, congue id risus. Cras tristique, ipsum ornare tristique lobortis.</p>
  </div>
  <button class="rv_button closed"></button>
 </div>
 
 <div class="wrapper">
  <div class="reveal">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim congue pharetra. Morbi neque urna, vestibulum vel fringilla ac, congue id risus. Cras tristique, ipsum ornare tristique lobortis.</p>
  </div>
  <button class="rv_button closed"></button>
 </div>
 
 <div class="wrapper">
  <div class="reveal">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim congue pharetra. Morbi neque urna, vestibulum vel fringilla ac, congue id risus. Cras tristique, ipsum ornare tristique lobortis.</p>
  </div>
  <button class="rv_button closed"></button>
 </div>