1

スライドを開く「ホバー」機能を備えた、意図したとおりに機能する純粋なcssアコーディオンを使用しています。ただし、これをトグルに変更して、クリックすると開き、クリックすると閉じるようにしようとしていました。私はそれを行う方法を説明し、そうするためのJSを提供したこのスレッドを見つけました:

ホバー アコーディオンを onclick に変換する

ただし、jquery とスクリプトを html に追加した後、動作しないようです。

（アコーディオンのタイトルが本来あるべき場所に表示されないのはなぜですか。これはフィドルの問題であり、Webページとして機能します。）

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を変更した場合と同じように、JSを体に持っていることに問題があるようです。

4

2 に答える 2

0

必要なスクリプトは

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

.hover次に、代わりに を使用するように css を更新する必要があります。:hover

新しいフィドル: http://jsfiddle.net/fLkaG/

于 2013-07-16T12:22:30.867 に答える