当前位置: 代码迷 >> JavaScript >> Divi:单击时隐藏按钮
  详细解决方案

Divi:单击时隐藏按钮

热度:53   发布时间:2023-06-03 18:16:11.0

我是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>

如果要查看其外观,可以在此处查看示例: :

你切换名为类openedclosed ,而你的CSS显示, hideshow是影响元素在决赛中的存在渲染页面的。 另外,大多数课程可能都不需要。 您可以只添加hide一个。

将您的最后一条平凡的机会

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

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

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

只需在您的click函数中添加$(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>

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

您要在单击按钮后将其删除吗? 如果是这样,您只需要在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');
});
  相关解决方案