0

Coolio さん、私は記事のアーカイブとして機能する単純なツリーの作成に取り組んでいます。そして、トグルを使用して月を閉じて、中に何が書かれているかを表示しています。コードはまったくきれいではありませんが、jquery 1.3.2に適合させる必要があるため、ツリープラグインを使用できません。しかし、コードを書くためのより良い方法があれば、私も耳を傾けます:D

ここに私のhtmlがあります:

div id="side_archive">
  <h4>Archives</h4>
  <ul>
    <li><a id="may12" href="#">May</a></li>
    <ul class="child" id="may">
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
    <li><a id="june12" href="#">June</a></li>
    <ul class="child" id="jun">
      <li>Article 4</li>
      <li>Article 5</li>
      <li>Article 6</li>
    </ul>
    <li><a id="july12" href="#">July</a></li>
    <li><a id="august12" href="#">August</a></li>
    <ul class="child" id="aug">
      <li>Article 7</li>
      <li>Article 8</li>
      <li>Article 9</li>
    </ul>
    <li><a id="september12" href="#">September</a></li>
    <ul class="child" id="sep">
      <li>Article 10</li>
      <li>Article 11</li>
      <li>Article 12</li>
    </ul>
    <li><a id="october12" href="#">October</a></li>
    <ul class="child" id="oct">
      <li>Article 13</li>
      <li>Article 14</li>
      <li>Article 15</li>
    </ul>
    <li><a id="november12" href="#">November</a></li>
    <ul class="child" id="nov">
      <li>Article 16</li>
      <li>Article 17</li>
      <li>Article 18</li>
    </ul>
    <li><a id="december12" href="#">December</a></li>
  </ul>
</div>

そしてJavaScript：

 $(document).ready(function() {
 // basic tree function
 $('.child').hide();

 $('#january12').click(function() { $('#jan').toggle("slow")});
 $('#february12').click(function() { $('#feb').toggle("slow")});
 $('#march12').click(function() { $('#mar').toggle("slow")});
 $('#april12').click(function() { $('#apr').toggle("slow")});
 $('#may12').click(function() { $('#may').toggle("slow") });
 $('#june12').click(function() { $('#jun').toggle("slow")});
 $('#july12').click(function() { $('#jul').toggle("slow")});
 $('#august12').click(function() { $('#aug').toggle("slow")});
 $('#september12').click(function() { $('#sept').toggle("slow")});
 $('#october12').click(function() { $('#oct').toggle("slow")});
 $('#november12').click(function() { $('#nov').toggle("slow")});
 $('#december12').click(function() { $('#dec').toggle("slow")});

});

ここで、リストがページの途中にあり、月をクリックすると画面が更新され、ページの上部に移動するという奇妙なことがあります。その機能を取得して、あなたを振り回す方法はありますか..

助けてくれてありがとう：D

4

2 に答える 2

3

各アイテムのhref="＃"のデフォルトのアクションを防ぐ必要があるように思えます。

jQueryを使用してこれを行うには、次のように記述できます。

$("#example").click(function(e) {

  e.preventDefault(); 

  //Add your code here

});

基本的な考え方を示すために、コードをこのようにレイアウトしました。おそらく、コードをレイアウトした方法の代わりに、次のようにすることができます。

$(a).click(function(e) {
  e.preventDefault(); 

 switch ($(this).attr("id")) {
   case "january12":
     $('#jan').toggle("slow");
     break;
   case "february12":
     $('#feb').toggle("slow");
     break;
 }

});

引き続きswitchステートメントを使用して、さまざまなdivを表示および非表示にすることができます

于 2012-05-17T13:08:54.983 に答える
1 
'#january12').click(function(e) { $('#jan').toggle("slow"); e.preventDefault(); return false; });
于 2012-05-17T13:09:08.183 に答える