CSS手风琴 - >添加jquery以改变“悬停”到切换，但JS不注册？ [英] CSS Accordion -> Adding jquery to change "hover" to a toggle but the JS doesn't register?
问题描述
我使用一个纯粹的css手风琴，它像我预想的那样工作，用一个悬停功能打开幻灯片。然而，我想把这个更改为切换，以便当你点击，它打开，当你点击它关闭。我发现这个线程解释如何做，并提供JS这样做：
I'm using a pure css accordion, which works as I intended it, with a "hover" function which opens the slides. However I was looking to change this to a toggle so that when you click, it opens, when you click it closes. I found this thread which explained how to do it and provided the JS to do so:
但是在将jquery和脚本添加到我的html之后，似乎工作：
However after adding jquery and the script to my html, it doesn't seem to work:
（idk为什么手风琴上的标题没有出现在它应该的地方，这只是一个问题，它作为一个网页。
(idk why the title on the accordion doesn't appear where it should, this is only an issue on fiddle, it works as a webpage.)
$('h3','.accordion ul li').on('click',function() {
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
我猜我从上面的线程中获取的js是不对的，不知道在哪里。我试图确保它是与我使用的CSS，但我不是一个编码器，所以我可能会丢失一些明显的东西。
I'm guessing the js that I took from the thread above is wrong somehow, but I'm not sure where. I've tried to make sure it's relating to the css I'm using, but I'm not a coder, so I may be missing something obvious.
p.s。上面的JS和在小提琴是从其他线程按原样，我已经尝试删除'h3'等，以确保它不是那是造成一个问题，但显然不是。
p.s. the JS above and in the fiddle is taken "as is" from the other thread, I have tried removing the 'h3' etc. to make sure it wasn't that which was causing a problem, but apparently not.
编辑：对不起，忘记提及，这必须是IE8兼容。
edit: Sorry, forgot to mention, this must be IE8 compatible.
<!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>
Edit2：发布我的HTML上面incase我在这里犯了错误。也许。大概。
Edit3：好吧，好像是我在身体里有JS的问题，如果我改变它在头部。
Posted my HTML above incase I've made an error here. Maybe. Probably. Okay, seems to be a problem with me having the JS in the body, same if I change it to in the head.
推荐答案
您有两个问题。您的jQuery选择器不正确，您需要更新：hover css选择器将其更改为 .hover class：
You had two problems. Your jQuery selector was incorrect and you needed to update your :hover css selector changing it to a .hover class:
新选择器：
$('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%;
}
这篇关于CSS手风琴 - >添加jquery以改变“悬停”到切换，但JS不注册？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
