代码之家 › 专栏 › 技术社区 › qnoid

当元素最初隐藏时,是否不应用幻灯片切换?

jquery

qnoid · 技术社区 · 15 年前

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

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

有一个“粗略动画”看起来像是发生了滑动,但内容仍然隐藏。

从 doc 的SlideToggle()

如果元素最初显示,它将被隐藏;如果隐藏,它将被显示。

2 回复 | 直到 15 年前

Nick Craver 15 年前

你把孩子们藏起来了及其子类(等等,它与这些类的任何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

然而,更平滑的方法是不隐藏 .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 ,您可以看到动画更平滑,因为您只隐藏/显示每个级别所需的内容。

Ju Nogueira 15 年前

我相信这不是最好的解决办法,但如果你打电话来

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

而不是

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

最初隐藏潜水器,它工作。