javascript - 迪维 : Hide Button when clicked

Question

我是 jQuery 编码的新手，我的代码需要帮助。 我有一个按钮，可以让我在我的网站上显示一个隐藏的部分，但此刻按钮仍然存在，即使我想让他消失。 我的网站是用 Wordpress 和 Divi 构建的。

通过以下代码，您将获得我在 CSS 中使用隐藏/显示值的最新尝试。

<style type="text/css">
.rv_button.closed:after {content:"";}
.rv_button.opened:after {content:"";}
.hide {display:none;}
.show {display:block;}
</style>

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#reveal').hide();

  jQuery('.rv_button').click(function(e) {
    e.preventDefault();
    jQuery("#reveal").slideToggle();
    jQuery('.rv_button').toggleClass('opened closed');
  });
});

</script>

如果你想看看它长什么样，你可以在这里看例子:https://divinotes.com/reveal-a-hidden-divi-section-row-or-module-on-button-click/

Answer 1

您正在切换名为 opened 和 closed 的类，而您的 CSS 显示 hide 和 show 是影响元素在页面最终呈现中的存在的那些。此外，大多数类(class)可能都不需要。您可以只添加 hide 一个。

将你的最后一条重要线路设为

jQuery('.rv_button').addClass('hide');

如果您已经将 show 类应用到按钮，那么您最初的想法是有道理的。您只需更改类以匹配您在样式中定义的类。

jQuery('.rv_button').toggleClass('show hide');