1

我正在使用一个纯 css 手风琴，它可以按我的预期工作，并带有一个打开幻灯片的“悬停”功能。但是，我希望将其更改为切换开关，以便单击时打开，单击时关闭。我发现这个线程解释了如何做到这一点并提供了 JS 这样做：

将悬停手风琴转换为 onclick

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

（我知道为什么手风琴上的标题没有出现在它应该出现的位置，这只是小提琴上的一个问题，它可以作为网页使用。）

http://jsfiddle.net/7Q8ea/

$('h3','.accordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});

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

ps上面和小提琴中的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>

Edit2：在上面发布我的 HTML，以防我在这里出错。也许。大概。Edit3：好的，我的身体里有 JS 似乎是个问题，如果我把它改成头部也是一样的。

4

2 回答 2

2

你有两个问题。您的 jQuery 选择器不正确，您需要更新您的:hovercss 选择器，将其更改为一个.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%;
}

jsFiddle

于 2013-07-16T12:21:40.243 回答
0

你需要的脚本是

   $('.accordion li h2').on('click',function() {  
$(this).parents('li').toggleClass('hover').siblings().removeClass('hover');
    });

然后，您需要更新 css 以便它使用.hover而不是:hover

新小提琴：http: //jsfiddle.net/fLkaG/

于 2013-07-16T12:22:30.867 回答