2012-12-21 13 views
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; 
    }); 
}); 

현재 불투명도 토글 오프에 깜박하고와 제대로 작동하지 않습니다.

답변

5

jsfiddle가 업데이트되었습니다. 그것은 당신의 문제를 해결합니까?

$(document).ready(function(){ 
$('.list li.expandable ul').hide(); 
$('.list li.expandable ul').css({ opacity: 0 });; 
$('.expandable').click(function(){ 
    if ($(this).find("> UL").is(":visible")) { 
     $(this).find("> UL").fadeTo(2000, 0, function() { 
      $(this).slideToggle("slow"); 
     }); 
    } else {   
     $(this).find('> ul').slideToggle('slow', function() { 
      $(this).fadeTo(2000, 1); 
      //return false; 
     }); 
    } 
}); 
}); 
+0

** + 1 ** 우수 답변! – arttronics

+1

'$ (this) .find ("> UL")'를 로컬 변수에 캐싱하여 약간 향상시킬 수 있습니다. 귀하의 코멘트는 –

+0

** + 1 **입니다. 그 시점에서 플러그인으로 변환 할 수 있습니다. :-D – arttronics

관련 문제