CSS Accordion - 使用 jquery 使“悬停”切换，JS 是正确的，但在我的 HTML 中不起作用答案

【问题标题】：CSS Accordion - Used jquery to make "hover" a toggle, the JS is correct, but doesn't work in my HTMLCSS Accordion - 使用 jquery 使“悬停”切换，JS 是正确的，但在我的 HTML 中不起作用
【发布时间】：2013-07-17 07:44:23
【问题描述】：

这以前是一个纯 CSS 手风琴，但是我决定为幻灯片添加一个切换功能，以使用户更容易使用，而不是在鼠标移出该区域时让它们关闭。感谢我之前帖子中的帮助：

CSS Accordion -> Adding jquery to change "hover" to a toggle but the JS doesn't register?

我有一个有效的“悬停切换”，它在 JSFiddle 中正常工作：

http://jsfiddle.net/7Q8ea/5/

我现在遇到的问题是，当我将代码放在 JSfiddle 之外并将其放入我的 HTML 中时，它就不起作用了。我检查了小提琴，将其从“Onload”更改为“No wrap - In body>”，它重现了我遇到的问题。

我去寻找一个解决方案，发现提到使用这段代码，将 JS 包装在头部。但是，要么我的语法不正确，要么它也不起作用：

$(document).ready(function() {//put your script here...});

我当前的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Pure CSS accordion</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home">
   <ul class="accordion" id="vertical">
      <li class="slide-01">
        <div>
          <h2>Title goes Here</h2>
          <br />
          <img src="http://i.imgur.com/ezY207l.gif" height="125" width="180" />            <taxt>Text here</taxt>
        </div>
      </li>
   </ul>
   <script src="jquery.js"></script>
   <script $('h3, ul.accordion  li').on('click',function() {
        console.log('hi'); 
        $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
     });
   </script>
</body>
</html>

如果我把它放在头上：

<script src="jquery.js"></script>

<script $(document).ready(function() {$('h3, ul.accordion  li').on('click',function()  $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
    });
</script>

然后 CSS 根本不加载。不过，我的语法可能很混乱/错误。任何帮助表示赞赏让这个工作。（必须像往常一样兼容 IE8 :( )

【问题讨论】：

您可以在

标签： jquery html css hover toggle

【解决方案1】：

你忘了关闭你的第二个打开script标签：

<script src="jquery.js"></script>

<script> 
$(document).ready(function() {
    $('h3, ul.accordion  li').on('click',function() {
       console.log('hi'); $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
    });
});
</script>

【讨论】：

/facedesk /facesyntax -- 谢谢！很想知道这是怎么回事哈哈。我责怪炎热^_^
@Jon 它发生在每个人身上:)

【解决方案2】：

第二个脚本标签中缺少“>”。

应该是：

<script>
$(document).ready(function() 
    {$('h3, ul.accordion  li').on('click',function(){
        $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
    }
});
</script>

【讨论】：