3
불투명도 토글 시도 중입니다. 기본적으로 목록 항목은 제로 불투명도로 설정되므로 높이가 유지됩니다. 목록 하위 카테고리 헤드를 클릭하면 빈 목록 영역이 목록 항목의 깊이만큼 떨어지고 불투명도는 목록 요소를 나타 내기 위해 전환해야합니다. 하위 카테고리 목록 머리글을 다시 클릭하면 목록 항목의 불투명도가 0으로 되돌려지고 목록 영역이 축소됩니다. DOM에서 제거 된 hide, hideToggle 또는 이와 유사한 함수가 아닌 불투명도 메서드에 대해 목록 항목을 유지해야합니다. http://jsfiddle.net/hotdiggity/zn6cz/10/jQuery 불투명도 전환
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Toggle Opacity</title>
<script type="text" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<ul class="list">
<li><a href="#">Subcategory</a></li>
<li id="id-1" class="expandable"><a href="#">Subcategory - Click this one</a>
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
<li>Sub menu item 3</li>
<li>Sub menu item 4</li>
<li>Sub menu item 5</li>
<li>Sub menu item 6</li>
</ul></li>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Subcategory</a></li>
</ul>
</body>
</html>
JQuery와 ...
$(document).ready(function(){
$('.list li.expandable ul').hide();
$('.list li.expandable ul li').css({ opacity: 0 });;
$('.expandable').click(function(){
$('#id-1.expandable ul').slideToggle('slow');
// $(this).toggleClass('toggle-arrow');
$(this).toggle(function() {
// $('.list li.expandable ul li').stop();
$('.list li.expandable ul li').fadeTo(2000,1);
return false;
},
function() {
// $('.list li.expandable ul li').stop();
$('.list li.expandable ul li').fadeTo(2000,0).delay(500);
return false;
});
return false;
});
});
현재 불투명도 토글 오프에 깜박하고와 제대로 작동하지 않습니다.
** + 1 ** 우수 답변! – arttronics
'$ (this) .find ("> UL")'를 로컬 변수에 캐싱하여 약간 향상시킬 수 있습니다. 귀하의 코멘트는 –
** + 1 **입니다. 그 시점에서 플러그인으로 변환 할 수 있습니다. :-D – arttronics