时间戳

首页 > 解决方案 > 我可以在一页上列出隐藏和显示帖子吗？

javascript - 我可以在一页上列出隐藏和显示帖子吗？

问题描述

我正在使用以下 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。

我想使用相同的效果在一个页面上隐藏和显示博客文章列表，但它不起作用。我尝试将 ID 添加到按钮而不是类，因为它们不是唯一的项目，但这也不起作用。

有没有办法调整代码来帮助我实现这一目标？

标签： javascripthtmljquerycsswordpress

解决方案

如果没有看到您的 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>

推荐阅读