元素初始隐藏时，幻灯片切换不适用？

考虑下面的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

元素初始隐藏时，幻灯片切换不适用？

回答

相关问题