jQuery 切换以扩展/收缩独立于先前状态的所有内容答案

【问题标题】：jQuery toggle to expand/contract all content independent of previous statejQuery 切换以扩展/收缩独立于先前状态的所有内容
【发布时间】：2012-06-19 18:49:21
【问题描述】：

file://localhost/C:/Users/kürşat/Desktop/yeni%20site/faq%20-%20Kopya/kopya.html

这是我的摄影教程页面。当有人点击问题时，我确实设法打开/关闭。

我不能做什么：右上角的按钮可以展开所有问题，但不能缩小所有问题。即使其中一些以前打开过，我也应该全部收缩/扩展。起初我的代码与之前的状态相反。

我该怎么做？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
    $(this).next().toggle("fast");
    $(li).css("background-color","#999");
    $(article).css("background-color","#FDFEE9");
});
$(document).ready(function(){
$("#expand").click(function(){


     $("article").toggle(true);
     $(this).text($(this).text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});

$("article").toggle();
});

}); 
</script>


</head>

<body>
    <div  id="page"><h1>Temel Fotoğrafçılık Bilgileri<button id="expand">Genişlet</button></h1>




  <div class="faq"> 
    <!-- The FAQs are inserted here -->
<ul>
    <li>question 1?</li>
     <article> <p>answer 1.</p></article>

  <li>question 2?</li>
     <article> <p>answer 2.</p></article>

  <li>question 3?</li>
     <article> <p>answer 3.</p></article>
</ul>
</div>
</body>
</html>

这是工作的 JSfiddle 版本：

http://jsfiddle.net/reJu9/

【问题讨论】：

标签： toggle togglebutton jquery

【解决方案1】：

将expand点击回调改为

$("#expand").click(function(){
     var $this = $(this);
     if($this.text() == 'Genişlet')
        $('article').show();
     else
        $('article').hide();
     $this.text($this.text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});

演示： http://jsfiddle.net/joycse06/reJu9/1/

【讨论】：

【解决方案2】：

维护一个变量，它告诉您按钮应该展开还是折叠问题。

查看this updated fiddle

【讨论】：