Question

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

Answer 1

听起来我需要阻止每个项目的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

Answer 2

'#january12').click(function(e) { $('#jan').toggle("slow"); e.preventDefault(); return false; });

jQuery切换随机刷新屏幕

2 个答案: