jquery - 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>

查询脚本：

$(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/