Javascript 手风琴文字冲突_Javascript_Jquery_Html_Css

Javascript 手风琴文字冲突

javascript jquery html css

Javascript 手风琴文字冲突,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是手风琴的最新版本。它在fiddle中运行良好，但在html文件中复制代码时却无法正常工作下面是HTML文件代码编辑HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="s

这是手风琴的最新版本。它在fiddle中运行良好，但在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>


无标题文件


标题1
小组1的内容。


标题2
小组2的内容。


标题3
小组3的内容。


标题4
小组4的内容


 
$（文档）.ready（函数（）{
$（'h3'，'.horizontalaccordion ul li'）。在（'click'，function（）上{
$（this）.closest（'li'）.toggleClass（'hover'）.sides（）.removeClass（'hover'）；
});
});

如果您从某些行中删除一些特殊字符，则该操作有效。在一些真实的文本编辑器（如vim）中打开html文件，您将看到。我在vim中看到类似于

符号的东西，如果我删除它们，那么它可以正常工作

复制一下：

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


无标题文件


标题1
小组1的内容。


标题2
小组2的内容。


标题3
小组3的内容。


标题4
小组4的内容


$（文档）.ready（函数（）{
$（'h3'，'horizontalaccordion ul li'）。打开（'click'，函数（）{
$（this）.closest（'li'）.toggleClass（'hover'）.sides（）.removeClass（'hover'）；
});
});

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

非常感谢。你能帮我把内容放到标题的左边吗？nw它是在右侧打开的。当您单击li项目时，它会在右侧打开内容div。但我需要将tat内容div打开到li项目的左侧