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 回答