javascript - クリックではなくホバーで展開するようにアコーディオンを作成するには?

Question

クリックではなくホバーで展開するようにアコーディオンを作成することは可能ですか? そして、クリックで何か他のことをする方法は?

アップデート

jQuery UI アコーディオン ウィジェットについて話していました。

Answer 1

jQuery UIアコーディオンドキュメントの5番目の例：マウスオーバーで開く

    $( "#accordion" ).accordion({
        event: "mouseover"
    });

プレーンjQueryの.click()またはメソッドを使用して、任意のクリックイベントを添付できます。.on('click')このような質問をする前に調べてください。

Answer 2

シンプルな CSS アコーディオン: http://jsbin.com/atamat/edit#html,live

  .accordion > div {
    display:none;
  }
  .accordion:hover > div {
    display:block;
  }

HTML:

  <div class="accordion">
    <h2><a href="#link2">Header goes here</a></h2>
    <div>
      Content goes here
    </div>
  </div>

  <div class="accordion">
    <h2><a href="#link2">Header goes here</a></h2>
    <div>
      Content goes here<br />Content goes here<br />Content goes here<br />
      Content goes here<br />Content goes here<br />Content goes here<br />
      Content goes here<br />Content goes here<br />Content goes here<br />
    </div>
  </div>

シンプルな jQuery ソリューション: http://jsbin.com/atamat/2/edit#javascript,html,live

$(".accordion > div").hide().parent().hover(function(event) {
  $(this).children("div").slideToggle(event.type === "mouseenter");
});

HTML:

同じ^