尝试添加显示/隐藏按钮,但被主题的 javascript 覆盖

Trying to add a show/hide button, but overwritten by theme's javascript

本文关键字:覆盖 javascript 添加 显示 按钮 隐藏      更新时间:2023-09-26

Edit - 我能够找到js文件并删除悬停效果。

我正在研究WP。我有一个选择表单,我需要在单击按钮时显示该表单。主题提供的功能在悬停时显示表单,但它有问题,使用户体验很差。

我已经设法添加了按钮,但我不知道如何覆盖当前的悬停功能。

这是我有

爪哇语

<script language="JavaScript">
    function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        } 
</script>

.HTML

<div id="nav_subscription" class="subscription_form clearfix">
<span id="subscribe_dd" class="contrast"><?php gb_e( 'Get the Latest Deals' ) ?><span><a href="#" onclick="toggle('subscription_form_wrap');">Toggle Div</a></spa>
</div><!-- #main_navigation --> 
    <div id="subscription_form_wrap" style="display:none;">
    <div class="optinbar_close" style="bottom: 202px; left: -10px;"></div>                           
    <p class="fillout2">Συμπλήρωσε την παρακάτω φόρμα και μπες στο club επικοινωνίας του Fitness Forum για να σου στείλουμε αμέσως με email το δώρο σου. Απλά, γράψε το όνομα και το email σου και κλίκαρε 'Στείλτε το δώρο μου'.</p>   

<!-- Begin MailChimp Signup Form -->                                    
    <div id="mc_embed_signup">                  
    </div>
</div><!-- #header_subscription.subscription_form -->

.CSS

#subscription_form_wrap {
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: none;
    background-color: #FFFFFF;
    padding: 0;
    float: left;
    position: absolute;
    top: 34px;
    right: 0;
    height: auto;
    min-width: 200px;
    border: 1px solid #CCC;
    font-size: 13px;
    }
#subscribe_dd {
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 17px;
    background-color: #999;
    width: 255px;
    height: 19px;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    }
.optinbar_close {
    float: right;
    background: url(assets/images/close3.png) no-repeat;
    display: inline;
    height: 32px;
    width: 32px;
    cursor: pointer;
    text-decoration: underline;
    color: white;
    position: absolute;
    right: 10px;
    }

这是该网站的[链接]。

我正在尝试修复导航栏上的灰色框,上面写着:"Έχεις ήδη κερδίσει ένα δώρο!"。

不确定这是否是你想要的,但不是:

<span id="subscribe_dd" class="contrast">Έχεις ήδη κερδίσει ένα δώρο!<span>
    <a href="#" onclick="toggle('subscription_form_wrap');">Toggle Div</a></spa>

您可以尝试将跨度包装到 href 中:

<a href="#" onclick="toggle('subscription_form_wrap');">
    <span id="subscribe_dd" class="contrast">Έχεις ήδη κερδίσει ένα δώρο!<span>
</a>

如果你真的只想使用Javascript,这也可以:

<span id="subscribe_dd" class="contrast" onclick="toggle
    ('subscription_form_wrap')>Έχεις ήδη κερδίσει ένα δώρο!<span>

不知道那个标签是什么

</spa>

不过差不多。 ;)