jQuery切換不透明度

嘗試獲取不透明度以切換。基本上列表項目設置爲零不透明度，從而保持其高度。當點擊列表子類別頭部時，空列表區域下拉列表項目的深度，然後不透明度應該切換以顯示列表元素。再次單擊子類別列表頭時，列表項目的不透明度將淡化爲零，然後列表區域將摺疊。需要保留它們的列表項，因此不透明方法而不是隱藏，隱藏或類似的功能，從DOM中刪除它們。 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; 
    }); 
});

目前不透明度切換髮生故障而產生閃爍和關閉。

來源

2012-12-21 hotdiggity

我更新了您的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; 
     }); 
    } 
}); 
});

來源

2012-12-21 08:12:29

** + 1 **優秀的答案！ – arttronics

通過將$（this）.find（「> UL」）緩存到局部變量可以改進一點。 –

** + 1 **您的評論。那時候，你可能會把它變成一個插件。 :-D – arttronics

jQuery切換不透明度

回答

相關問題