Question

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

使用以下代码，您将尝试使用CSS中的hide / show值进行最新的尝试。

<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是影响元素在页面最终呈现中的存在的元素。另外，大多数课程可能都不需要。您只需添加hide。

最后一条非平凡的行机会

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

如果您已经将show类应用于按钮，那么您的原始想法就很有意义。您只需要更改类以匹配您在样式中定义的类即可。

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

Answer 2

只需在您的点击功能中添加$(this).hide()。

<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');

            // Hide button
            $(this).hide()
        });
    });
</script>

Answer 3

感谢大家对我的问题的参与。我设法使用了@ vmf91的解决方案，该解决方案就像一个魅力。再次感谢大家，度过愉快的一天。

Answer 4

您要在单击按钮后将其删除吗？如果是这样，您只需要在button事件中插入以下行：

jQuery(this).hide();

完整点击事件：

jQuery('.rv_button').click(function(e) {
    e.preventDefault();
    jQuery(this).hide();
    jQuery("#reveal").slideToggle();

    //You don't need this if you want to hide the button
    //jQuery('.rv_button').toggleClass('opened closed');
});

Divi：单击时隐藏按钮

4 个答案: