jQuery使用两个不同的触发器切换单个div [英] jQuery toggle single div with two different triggers

查看:242
本文介绍了jQuery使用两个不同的触发器切换单个div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对jQuery知之甚少...当点击两个触发器之一时,我需要帮助解决单个div的这个特定实例的切换。现在的问题是,如果使用一个触发器,你必须单击两次以使另一个触发器工作。

I have limited knowledge of jQuery...I need help with this specific instance of a single div to be toggled when one of two triggers is clicked. The problem right now is that if one trigger is used, you have to click twice to get the other trigger to work.

这是我的jQuery:

Here is my jQuery:

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

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

});

我的HTML基本上是这样的:

My HTML is roughly this:

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

如果你想在开发网站上看到这个,你可以在这里查看(触发器是右上角的联系人按钮和页脚中的联系人链接: Site Link

If you would like to see this on the development site, you can view it here (triggers are the "contact" button in the upper-right corner and the "contact" link in the footer): Site Link

推荐答案

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

Not sure I get the question, and I have no intention of going through your wordpress site to look at code, but try :

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

如果两个触发元素都具有.move类,则应该正常工作,否则只需将该类添加到两个触发元素!

Should work fine if both trigger element has the class ".move", otherwise just add that class to both trigger elements !

它现在不起作用的原因是因为切换功能跟踪.move类的两个不同元素的状态,但是不知道滑动的.contact-container元素是否可见。使用slideToggle将修复它。

The reason it does'nt work now is because the toggle function keeps track of states for two different elements with the class ".move", but does not know it the slided ".contact-container" element is visible or not. Using slideToggle instead will fix that.

这篇关于jQuery使用两个不同的触发器切换单个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆