1

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

CSS Accordion -> 添加 jquery 以将“悬停”更改为切换但 JS 未注册？

我有一个有效的“悬停切换”，它在 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 :( ）

4

2 回答 2

3

您忘记关闭第二个开始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>
于 2013-07-17T07:48:14.573 回答
1

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

应该：

<script>
$(document).ready(function() 
    {$('h3, ul.accordion  li').on('click',function(){
        $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
    }
});
</script>
于 2013-07-17T07:49:25.047 回答