Question

我对jQuery的了解有限......当点击两个触发器中的一个触发器时，我需要帮助切换单个div的特定实例。现在的问题是，如果使用一个触发器，则必须单击两次以使另一个触发器起作用。

这是我的jQuery：

jQuery(document).ready(function($) {

    jQuery(".move").toggle(function(){
        jQuery(".contact-container").slideDown('fast'); 
    }, function () {
        jQuery(".contact-container").slideUp('fast');
});

}）;

我的HTML大致是这样的：

<div class="contact-container"></div>
<ul>
    <li class="trigger"></li>
</ul>
<a class="trigger"></a>

如果您想在开发网站上看到这一点，可以在此处查看（触发器是右上角的＆＃34;联系人＆＃34;按钮和＆＃34;联系人＆＃34;链接在页脚中）：Site Link

Answer 1

我不确定是否得到了这个问题，而且我无意通过您的wordpress网站查看代码，但请尝试：

$(document).ready(function() {
    $(".move").on('click', function(){
        $(".contact-container").slideToggle('fast'); 
    });
});

如果两个触发器元素都具有“.move”类，则应该正常工作，否则只需将该类添加到两个触发器元素中即可！

它现在不起作用的原因是因为切换功能跟踪“.move”类的两个不同元素的状态，但不知道滑动的“.contact-container”元素是否可见。而使用slideToggle将解决这个问题。

Answer 2

首先，the fiddle。

您可以使用jQuery的.toggle()方法来执行此操作。它将根据需要自动显示或隐藏元素。

您还可以按类而不是按特定ID设置click处理程序。这样，无论何时任何具有该类的元素（在我的示例中，我使用toggle-button），它都将调用click处理函数。

更新：我更改了我的示例以匹配您在上面发布的示例代码。

<ul>
    <li class="trigger">Trigger 1</li>
</ul>
<a class="trigger">Trigger 2</a>

<div style="height: 400px; width: 400px; background-color:red;" class="contact-container"></div>

$(document).ready(function() {
    $('.trigger').on('click', function(e) {
       e.preventDefault();
        $('.contact-container').slideToggle('fast');
    });
});

jQuery用两个不同的触发器切换单个div

2 个答案: