Question

我想使用手风琴jquery功能添加标题，在悬停在图标上它应该显示折叠而展开反之亦然，请看下面的图像和代码。

http://s12.postimg.org/yu5tor9m5/2015_01_19_23_17_05_j_Query_UI_Accordion_Custom.png

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Customize icons</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

 <script>
  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  });
  </script>
</head>
<body>
 
<div id="accordion" title="Collapse">
  <h3>Section 1</h3>
  <div>  
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>  
</div> 
</body>
</html>

＆＃13;

Answer 1

试试这个：

 $('#accordion').mouseleave(function(){
     $( "#accordion" ).accordion({ active: false});  
 });

这是一个片段：

$(function() {
  $("#accordion").accordion({
    event: 'mouseover',
    animated: 'easeslide',
    collapsible: true
  });
});
$('#accordion').mouseleave(function(){
  $( "#accordion" ).accordion({ active: false});  
});

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>
<body>
  <div id="accordion" title="Collapse">
    <h3>Section 1</h3>
    <div>
      <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
        Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
  </div>

如何使用accordion jquery为Collapse和Expand添加标题

1 个答案: