jQuery组合切换与单击

代码如下：

我的问题是，当我按“关闭”然后按“切换”时，在第二次单击显示文本后，什么都不会发生。当我单击“切换”时，它会隐藏文本，然后单击“打开”时，它会显示文本，但当再次单击“切换”时，它仍会显示文本等。如何解决此问题

如果像这样的事情呢

---

不干扰切换功能。：）

---

或者，您可以使用

.toggleClass（）

方法：

.hide {
  display: none;
}

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

试试这个-

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();
  });
});

---

查看live，例如-

刚刚输入了完全相同的答案+1:）可能还应该在切换链接中添加一个（.toggle？）类-有点奇怪，任何一个标记都会运行切换。

<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();
  });
});