축소 및 확장을 위해 accordion jquery를 사용하여 제목을 추가하는 방법

아코디언 jquery 함수를 사용하여 제목을 추가하고 아이콘 위에 마우스를 가져 가면 축소가 표시되고 확장은 아래에있는 이미지와 코드를 참조하십시오.축소 및 확장을 위해 accordion jquery를 사용하여 제목을 추가하는 방법

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

<!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>

출처

2015-01-19 viveik10

그래서 이벤트를 클릭하기보다는 마우스를 올리면 축소/펼치기를 원하십니까? – EricBellDesigns

문제는 "축소"만 표시된다는 것입니까? 그것이 내 브라우저에서 최소한 보여주는 것입니다. – Bono

아이콘 위에 마우스를 올리면 제목 표시 만 필요합니다. 제목 이름을 축소 또는 확장으로 표시하려면 에서 이미지를 참조하십시오. http://s12.postimg.org/yu5tor9m5/2015_01_19_23_17_05_j_Query_UI_Accordion_Custom.png – viveik10

이 시도 :

$(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').mouseleave(function(){ 
    $("#accordion").accordion({ active: false}); 
});

은 조각이다

출처

2015-01-19 18:12:46 dippas

축소 및 확장을 위해 accordion jquery를 사용하여 제목을 추가하는 방법

답변

관련 문제