jQuery的结合切换与点击

Question

这里是代码：http://jsfiddle.net/sxqwp/1/

我的问题是，当我按下“关闭”，然后按“切换”什么都不会发生，第二次点击显示文本后。当我点击“切换”它隐藏文本，然后我点击“打开”它显示的文字，但是当再次点击“切换”它仍然显示等等。我怎样才能解决这个

如果什么这样的事情？

http://jsfiddle.net/sxqwp/6/

$("a").toggle(
    function() { 
     $('p').animate({width: "200px"}); 
    }, 
    function() { 
    $('p').animate({width: "100px"}); 
    } 
); 


$("a.openA").click(function() { 
    $('p').stop().animate({width: "200px"}); 
}); 


$("a.closeA").click(function() { 
    $('p').stop().animate({width: "100px"}); 
}); 

Answer 1

由不切换功能搞乱。 :) http://jsfiddle.net/sxqwp/2/

$("a").click(function() { 
    $('p').toggle(); 
}); 

Answer 2

或者您可以使用.toggleClass()方法：

.hide { 
    display: none; 
} 

$("a").click(function() { 
    $('p').toggleClass("hide"); 
}); 

Answer 3

尝试这一个 -

HTML代码：

<a href="#demo" class="nav-toggle">Toggle</a> 
<a href="#demo" class='nav-open'>Open</a> 
<a href="#demo" class='nav-close'>Close</a> 

<div id="demo" style="display:none;"> 
<p>Hello</p> 
<p>Good Bye</p> 
</div> 

jQuery脚本：

$(document).ready(function() { 
    $('.nav-toggle').click(function(){ 
    var content_toggle= $(this).attr('href');      
    $(content_toggle).slideToggle('slow'); 
}); 

    $('.nav-open').click(function(){ 
    var content_show = $(this).attr('href');      
    $(content_show).slideDown(); 
    }); 

    $('.nav-close').click(function(){ 
     var content_hide = $(this).attr('href');      
     $(content_hide).slideUp(); 
    }); 
}); 

视图住如。 - http://jsfiddle.net/sxqwp/11/