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/