0

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/

4

2 回答 2

1

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

检查这个更新的小提琴

于 2012-06-17T14:36:13.903 回答
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/

于 2012-06-17T14:34:06.270 回答