Javascript CSS手风琴->；将jquery添加到change"；悬停“；切换到开关，但JS不'；你不注册吗？_Javascript_Css_Toggle_Accordion

Javascript CSS手风琴->；将jquery添加到change"；悬停“；切换到开关，但JS不'；你不注册吗？

javascript css

Javascript CSS手风琴->；将jquery添加到change"；悬停“；切换到开关，但JS不'；你不注册吗？,javascript,css,toggle,accordion,Javascript,Css,Toggle,Accordion,我使用的是一个纯css手风琴，它按照我的预期工作，带有一个“悬停”功能，可以打开幻灯片。但是我想把它改成一个开关，这样当你点击时，它会打开，当你点击时它会关闭。我找到了这个线程，它解释了如何做，并提供了JS来做到这一点：但是，在将jquery和脚本添加到我的html后，它似乎不起作用：（idk为什么手风琴上的标题没有出现在它应该出现的地方，这只是小提琴上的一个问题，它可以作为一个网页。）我猜我从上面的线程中获取的js是错误的，但我不确定在哪里。我试图确保它与我正在使用的css相关，但我

我使用的是一个纯css手风琴，它按照我的预期工作，带有一个“悬停”功能，可以打开幻灯片。但是我想把它改成一个开关，这样当你点击时，它会打开，当你点击时它会关闭。我找到了这个线程，它解释了如何做，并提供了JS来做到这一点：

但是，在将jquery和脚本添加到我的html后，它似乎不起作用：

（idk为什么手风琴上的标题没有出现在它应该出现的地方，这只是小提琴上的一个问题，它可以作为一个网页。）

我猜我从上面的线程中获取的js是错误的，但我不确定在哪里。我试图确保它与我正在使用的css相关，但我不是一个程序员，所以我可能遗漏了一些明显的东西

p、上面的JS和fiddle中的JS是从另一个线程中“按原样”获取的，我已经尝试删除“h3”等，以确保它不是导致问题的原因，但显然不是

编辑：抱歉，忘了提及，这必须是IE8兼容的

<!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','.accordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
</script>
</body>
</html>


纯CSS手风琴


标题在这里

此处为文本


你有两个问题。jQuery选择器不正确，需要更新：hover
css选择器，将其更改为。hover
类：
新选择器：
$('h3, ul.accordion  li').on('click',function() {
//$('h3','.accordion ul li').on('click',function() {

新Css
/*.accordion:hover li{*/
#vertical .hover li{
    width:100%;
}
/*.accordion:hover{*/
#vertical .hover{
    height:200px;
    width:100%;
}

你需要的脚本是
   $('.accordion li h2').on('click',function() {  
$(this).parents('li').toggleClass('hover').siblings().removeClass('hover');
    });

然后需要更新css，使其使用.hover
而不是：hover

新提琴：
谢谢老板，我会尽快试一试。@Jon，我把选择器保持在原来的位置，因为你可能有我不知道的目的，但是。手风琴李可能就足够了。丹尼尔，出于某种原因，这在提琴中很好，但一旦我把代码复制到自己的文件中，它停止工作了。p、 你在答案中改变了这个：/*。手风琴：hover li{*/#vertical。hover li{width:100%；但不是在实际的小提琴中，它仍然可以工作？p.s.感谢控制台消息，lol。将此标记为答案，因为它是正确的。我认为这正是我试图使用Java的方式阻止了它的工作。
   $('.accordion li h2').on('click',function() {  
$(this).parents('li').toggleClass('hover').siblings().removeClass('hover');
    });