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

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 に答える
1

ボタンで質問を展開するか折りたたむかを示す変数を維持します。

この更新されたフィドルを確認してください

于 2012-06-17T14:36:13.903 に答える