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

【问题标题】：jQuery toggle single div with two different triggersjQuery 用两个不同的触发器切换单个 div
【发布时间】：2012-07-19 04:24:47
【问题描述】：

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

如果你想在开发网站上看到这个，你可以在这里查看（触发是右上角的“联系”按钮和页脚中的“联系”链接）：Site Link

【问题讨论】：

我很难理解您的问题。当单击两个触发器（您的意思是事件？）之一（您如何单击触发器？）时，您希望有一个 div 切换（您的意思是幻灯片？）。我只是有点困惑。
我不会说 jQuery/JavaScript...抱歉。但我在下面得到了答案，谢谢！

标签： jquery html triggers hyperlink toggle

【解决方案1】：

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

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

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

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

【讨论】：

谢谢！我知道这是问题所在......只是不知道如何解决它。 jQuery 让我做噩梦。
@JasonTowne - 实际上，你花了大约十分钟来编辑它，所以它看起来就像我的:-) .....
@adeneo 嘿，我确实编辑了我的帖子以包含您的 slideToggle() 方法。（从不知道那个！）剩下的就是尝试获取我的原始示例：jsfiddle.net/aG8p3 以匹配 RevCocnept 发布的代码示例。

【解决方案2】：

首先，the fiddle。

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

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

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

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

【讨论】：