Question

这是手风琴的DEMO。它在小提琴中工作正常，但是当我在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>

Answer 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>

Answer 2

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

手风琴剧本冲突

2 个答案: