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

Question

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

我正在开发 WP。我有一个选择表单，需要在单击按钮时显示。主题提供的功能可以在鼠标悬停时显示表单，但它存在错误，并且使用户体验很差。

我已成功添加按钮，但我不知道如何覆盖当前的悬停功能。

这是我的

Javascript

<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;
    }

这是该网站的[链接]。

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

Answer 1

不确定这是否是您想要的，但不是:

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

您可以尝试将跨度包装到 a 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>

不过。 ;)