Question

我的问题是当我按'关闭'然后按'切换'没有任何反应，在第二次点击后显示文字。当我点击“切换”它隐藏文字然后我点击“打开”它显示文字，但再次点击“切换”它仍然显示等。我该如何解决这个

如果是这样的话怎么办？

$("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 CODE：

<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 SCRIPT：

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

jQuery结合切换点击

3 个答案: