javascript - 如何使手风琴在悬停而不是点击时展开？

Question

是否可以让手风琴在悬停而不是点击时展开？以及如何在点击时做其他事情？

更新

我说的是 jQuery UI 手风琴小部件。

Answer 1

jQuery UI Accordion 文档中的第 5 个示例：鼠标悬停时打开

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

您可以附加任何您希望在纯 jQuery中使用.click()or方法的点击事件。.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：

一样的^