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

问题描述：

我对jQuery的知识有限...我需要有关单个div的特定实例的帮助，当单击其中一个触发器时，该切换将被切换。现在的问题是，如果使用了一个触发器，则必须点击两次才能使另一个触发器正常工作。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切换（你的意思是幻灯片？）。我只是有点困惑。 – 2012-07-19 22:19:52

我不会说jQuery/JavaScript ...对不起。但我在下面得到了我的答案，谢谢！ – RevConcept 2012-07-19 23:16:53

答

不知道我得到的问题，我不想去，通过你的WordPress网站看代码的意图，但尝试：

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

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

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

谢谢！我知道这是问题......只是不知道如何解决这个问题。 jQuery给了我恶梦。 – RevConcept 2012-07-19 22:31:11

+1分钟用于打我的答案。 :) – 2012-07-19 22:31:55

@JasonTowne - 实际上，它花了你大约十分钟的时间来编辑它，所以它看起来就像我的:-) ..... – adeneo 2012-07-19 22:34:42

答

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

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

相关推荐