Slide toggle doesn't apply when element is initially hidden?_问答_开发者

Slide toggle doesn't apply when element is initially hidden?

开发者 https://www.devze.com 2023-01-03 16:12 出处：网络

Consider the following html snippet <!DOCTYPE html> <html> <head> <script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.4.2.js\" ></script>

相关专题：jquery

Consider the following html snippet

<!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&开发者_StackOverflow中文版gt;

<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>

with the following javascript

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

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

});

works all great and expected.

However, when I add the following two lines to initially hide the two div(s)

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

there is a 'rough animation' that looks like the sliding takes place, but the contents remain hidden.

From the doc of slideToggle()

If the element is initially displayed, it will be hidden; if hidden, it will be shown.

You're hiding the children and their children (and so on, it matches any div with those classes), if you want to re-show them, you need to use .find() instead of .children() (which would only toggle the immediate children), like this:

$(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

However, a smoother approach would be to just not hide the .entry divs, using the :not() selector, like this:

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

Then use .siblings() instead of .parent().children(), like this:

$(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, you can see the animation is much smoother now that you're only hiding/showing what you need at each level.

I believe this is not the best solution, but if you call

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

instead of

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

to initially hide the divs, it works.

Slide toggle doesn't apply when element is initially hidden?

精彩评论

关注公众号

热门标签

图文推荐

Slide toggle doesn't apply when element is initially hidden?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：