Question

考虑以下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();

有一个看似滑动的'粗略动画'，但内容仍然隐藏。

来自slideToggle（）的doc

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

Answer 1

你隐藏了孩子和他们的孩子（等等，它与那些类匹配任何div），如果你想重新显示它们，你需要使用{{3} }而不是.find()（只会切换立即子项），如下所示：

$(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();
    });
});

.children()

然而，更顺畅的做法是不使用You can view a demo here隐藏.entry div，如下所示：

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

然后使用:not() selector代替.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();
    });
});

.siblings()，你可以看到动画更加流畅，因为你只是在每个级别隐藏/显示你需要的东西。

Answer 2

我认为这不是最佳解决方案，但如果你打电话

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

而不是

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

最初隐藏 div，它有效。

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

2 个答案: