jquery中每个元素有多个类的问题

时间:2013-05-29 19:09:07

标签: jquery html5

好的,所以我有这个代码切换滑动功能。我想在链接中添加第二个类来打开内容的各个部分以读取head =“collapsed,head”,但是当我这样做时,JQuery停止工作,我无法弄清楚原因。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin:0; padding:0; } /* a simple reset */
    .head, li, h2 { margin-bottom:15px; }
    .head { display:block; }
    .content { display:none; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">    </script>
  <script>
$(document).ready(function(){
  $('.head').click(function(e){
    e.preventDefault();
    $(this).closest('li').find('.content').slideToggle();
  });
});
</script>
</head>
<body>
<div><a onclick="expandAll()"><strong>Expand All</strong></a></div>
<div><a onclick="collapseAll()"><strong>Collapse All</strong></a></div>
  <ul>
    <li>
     <a href='#' class='head'>Heading 1</a>
  <div class='content'>Content 1
  </div>
</li>
<li>
  <a href='#' class='head'>Heading 2</a>
  <div class='content'>Content 2</div>
</li>
<li>
  <a href='#' class='head'>Heading 3</a>
  <div class='content'>Content 3</div>
</li>
 </ul>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

多个类之间不应该有逗号。所以你应该添加

class="collapsed head"