jquery - jQueryはトグルとクリックを組み合わせる

Question

ここにコードがあります：http://jsfiddle.net/sxqwp/1/

私の質問は、「閉じる」を押してから「トグル」を押しても、2回目のクリックでテキストが表示された後、何も起こらないということです。「トグル」をクリックするとテキストが非表示になり、「開く」をクリックするとテキストが表示されますが、もう一度「トグル」をクリックすると表示されます。これを修正するにはどうすればよいですか

このような場合はどうなりますか？

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/