0

这是手风琴的演示。它在小提琴中工作正常，但是当我将代码复制到 html 文件中时它不起作用。

这是HTML文件代码

编辑的 HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="horizontalaccordion.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>

<body>


<div class="horizontalaccordion">
<ul>
    <li>
        <h3>Heading 1</h3>
        <div>Content For Panel 1.</div>
    </li>
    <li>
        <h3>Heading 2</h3>
        <div>Content For Panel 2.</div>
    </li>
    <li>
        <h3>Heading 3</h3>
        <div>Content For Panel 3.</div>
    </li>
    <li>
        <h3>Heading 4</h3>
        <div>Content For Panel 4</div>
    </li>
</ul>
</div>​ 
<script type="text/javascript">
    $(document).ready(function() {
 $('h3','.horizontalaccordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});​
});
</script>


</body>
</html>
4

2 回答 2

1

如果您从某些行中删除一些特殊字符，它会起作用。在 vim 等真正的文本编辑器中打开你的 html 文件，你会看到。我在 vim 中看到类似<200b>符号的东西，如果我删除它们，它就可以正常工作。

只需复制以下内容：

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="horizontalaccordion.css"
    type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div class="horizontalaccordion">
      <ul>
        <li>
          <h3>Heading 1</h3>
          <div>Content For Panel 1.</div>
        </li>
        <li>
          <h3>Heading 2</h3>
          <div>Content For Panel 2.</div>
        </li>
        <li>
          <h3>Heading 3</h3>
          <div>Content For Panel 3.</div>
        </li>
        <li>
          <h3>Heading 4</h3>
          <div>Content For Panel 4</div>
        </li>
      </ul>
    </div>

    <script type="text/javascript">
      $(document).ready(function () {
        $('h3', '.horizontalaccordion ul li').on('click', function () {
          $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
        });
      });
    </script>
  </body>
</html>
于 2012-08-23T09:42:15.467 回答
0

可能是您的 CSS 文件未正确加载，请确保您的 .css 文件靠近您的 .htm 文件，如果没有尝试下载 .js 文件并将 src 更改为下载位置。除此之外我没有看到任何问题

于 2012-08-23T09:46:15.853 回答