jQuery .toggle（）模式显示/隐藏对话框

我浏览过一些类似的问题 - 但我一直在寻找永远，没有运气发现一个实现，就像我期待做的一样。jQuery .toggle（）模式显示/隐藏对话框

这很简单：

<a class="contacttoggle" href="#">Contact</a> 
<div>Lots of content between</div> 
<div>Lots of content between</div> 
<div>Lots of content between</div> 
<div>Lots of content between</div> 
<div class="contact_box">Contact info that is initially hidden and then fades in when the "contact_toggle" Contact link above is clicked</div>

我在寻找这个淡入，它会被绝对定位在页面上（没有后顾之忧，我可以处理CSS）。我只是不要想要一个幻灯片效果。只是渐渐英寸

我觉得这样的代码应该工作，但它不是:(

$(document).ready(function(){ 


    /* function to show and hide main navigation conatct box */ 
    $(".contact_box").hide(); 

    $('a.contacttoggle').click(function() { 
     $(this).next("div").find(".contact_box").toggle(400); 
     return false; 
    }); 


})

来源

2011-03-17 Brian

'$（ “接触 ”）的hide（）;'应该是'$（“。contact_box”）隐藏（）;'吧？ “不起作用”是什么意思？点击什么都不做？ – 2011-03-17 01:05:14

你是对的 - 在我正在编写的代码中是正确的 - 只是编辑了问题......哎呀！但是，仍然没有工作。 – Brian 2011-03-17 01:05:54

“不起作用”是什么意思？点击时没有任何反应？ – 2011-03-17 01:07:42

什么fadeToggle？

来源

2011-03-17 01:09:05 Haochi

+1，适合我！ – 2011-03-17 01:12:17

但这只会在一个方向（显示）。他希望它能够切换 – 2011-03-17 01:14:26

@jon_darkstar好吧，如果他环顾四周，就不难从那里进入[fadeToggle]（http://api.jquery.com/fadeToggle/）。 – Haochi 2011-03-17 01:30:17

而不是

$(this).next("div").find(".contact_box").toggle(400);

尝试

$("div.contact_box").toggle(400);

来源

2011-03-17 01:08:32

有什么我想不到的？第一种方式似乎不必要的复杂，但我觉得它有一个原因 – 2011-03-17 01:34:06

宁可t母鸡toggle()，只是animate() opacity with 'toggle'。

$(".contact_box").animate({opacity:'toggle'}, 400);

来源

2011-03-17 01:19:27 Marcel

blockUI怎么样？这是我真正过度使用的插件之一。

到这个链接了解更多信息：。 http://jquery.malsup.com/block/

来源

2011-03-17 01:20:32 iivel

jQuery .toggle（）模式显示/隐藏对话框

回答

相关问题