元素初始隱藏時，幻燈片切換不適用？

考慮下面的HTML片段元素初始隱藏時，幻燈片切換不適用？

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script> 
    <script type="text/javascript" src="scripts/foo.js"></script> 
</head> 

<body> 

<div class="apdu layer"> 
    <div class="apdu layer entry">APDU</div> 

    <div class="hci layer"> 
    <div class="hci layer entry">HCI</div> 

     <div class="raw layer"> 
      <div class="raw layer entry">RAW</div>    
      <div class="raw layer entry">RAW</div>    
      <div class="raw layer entry">RAW</div>    
    </div> 

    </div> 

    <div class="hci layer"> 
    <div class="hci layer entry">HCI</div> 

    <div class="raw layer"> 
     <div class="raw layer entry">RAW</div>   
     <div class="raw layer entry">RAW</div>   
    </div> 

    </div> 

    <div class="hci layer"> 
    <div class="hci layer entry">HCI</div> 
    <div class="raw layer"> 
     <div class="raw layer entry">RAW</div>   
     <div class="raw layer entry">RAW</div>   
     <div class="raw layer entry">RAW</div>   
     <div class="raw layer entry">RAW</div>   
    </div> 
    </div> 

</div>

與以下JavaScript

$(function() 
{ 
$('.apdu.layer.entry').click(function() { 
    $(this).parent().children('.hci.layer').slideToggle(); 
}); 

$('.hci.layer.entry').click(function() { 
    $(this).parent().children('.raw.layer').slideToggle(); 
}); 

});

工程所有偉大和預期。

然而，當我添加以下兩行最初隱藏兩個DIV（S）

$('.hci.layer').hide(); 
$('.raw.layer').hide();

有一個「粗糙的動畫」看起來像發生滑動，但內容仍然隱藏。

從的slideToggle（）

如果最初顯示元件，它會被隱藏的doc;如果隱藏，它會顯示。

來源

2010-06-17 qnoid

創建jsFiddle：http://jsfiddle.net/QEkwz/ – MvanGeest 2010-06-17 16:17:18

你躲在孩子和他們的孩子（等等，它與那些類的任何DIV相匹配），如果你想重新顯示這些，你需要使用.find()代替.children()（這將只切換立即兒童），像這樣：

$(function() { 
    $('.hci.layer, .raw.layer').hide(); 
    $('.apdu.layer.entry').click(function() { 
     $(this).parent().find('.hci.layer').slideToggle(); 
    });   
    $('.hci.layer.entry').click(function() { 
     $(this).parent().find('.raw.layer').slideToggle(); 
    }); 
});

You can view a demo here

然而，平滑方法w ^烏爾德是隻是沒有隱藏.entry的div，使用:not() selector，像這樣：

$('.hci.layer:not(.entry), .raw.layer:not(.entry)').hide();

然後用.siblings()代替.parent().children()，像這樣：

$(function() { 
    $('.hci.layer:not(.entry), .raw.layer:not(.entry)').hide(); 
    $('.apdu.layer.entry').click(function() { 
     $(this).siblings('.hci.layer').slideToggle(); 
    });   
    $('.hci.layer.entry').click(function() { 
     $(this).siblings('.raw.layer').slideToggle(); 
    }); 
});

You can view a demo here，你可以看到動畫是多少現在更流暢，你只隱藏/顯示你在每個級別需要什麼。

來源

2010-06-17 21:17:02

工作反應和卓越的洞察力以及如何。謝謝！ – qnoid 2010-06-18 07:45:56

我相信這不是最好的解決辦法，但如果你調用

$('.hci.layer.entry').click(); 
$('.apdu.layer.entry').click();

，而不是

$('.hci.layer').hide(); 
$('.raw.layer').hide();

最初隱藏的div，它的工作原理。

來源

2010-06-17 16:22:03

元素初始隱藏時，幻燈片切換不適用？

回答

相關問題