Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#10041 closed bug (invalid)

slideToggle Removes Display None from Div

Reported by: anonymous Owned by:
Priority: low Milestone: None
Component: effects Version: 1.6.2
Keywords: Cc:
Blocked by: Blocking:

Description

Hello,

I have noticed this problem since version 1.4.3. Below is an example of the problem..

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

<title></title>
</head>

<body>

<script type="text/javascript">
  $(document).ready(function() {
      $("#click").click(function() {

          $("#blah").slideToggle('slow', function() {
              var flipout = this;

              if (flipout.style.display == "block") { 
				  alert("block");
              } 
              else {   
				  alert("not block");
              }   
          });
      });
  });

</script>

<div id="blah" style="display:none;">
	<div style="width: 20px; height: 20px; border: #c0c0c0 solid 1px;">
	</div>
</div>

<input type="button" id="click" value="click"/>


</body>
</html>

My problem is that when you click the button, this should open up the div (which it does) and then when it finishes, kick off the callback where it checks if the div is set to "block" and reports "block" as the alert message. However, it doesn't do that. Instead jQuery appears to remove the display style from the div altogether (making it an empty string) and then reports "not block".

The thing is, this is for only the first time it opens. If you click the button to close and then click to reopen, it works as you would expect.

Additional Note: If I remove the inline element styling and use $("#blah").hide() to set the element first, there is no problem. So it appears to be an issue with jQuery not properly setting the element's style to "block" after it slides open?

Change History (3)

comment:1 Changed 8 years ago by anonymous

I use 1.5.2 in the example, but this problem appears to exist since 1.4.3. Prior to that version, it works without a problem. I have tested this in FF 4, Chrome 13 and IE 9.

comment:2 Changed 8 years ago by addyosmani

Component: unfiledeffects
Priority: undecidedlow
Resolution: invalid
Status: newclosed

Here's a jsFiddle containing your test: http://jsfiddle.net/yaHKJ/. Reviewing your code as well as the generated CSS in both Chrome and Firefox, I think you may be incorrectly assuming that the value of 'display' is going to be automatically switched from display:none to display:block, as opposed to simply being dropped or not being set. To work around this, simply manually set el.css('display','block') in your tests to get the behaviour you're after.

comment:3 Changed 8 years ago by anonymous

Total BS answer. jQuery specifically sets it to display: block on all consecutive executions, why not the first time? If we are to assume it does not set display to block, then it should not do it on consecutive opening/closing either. There is an inconsistency here that needs to be resolved.

If it is to drop the display style, then it should not add it back later. Otherwise this is still a bug.

Note: See TracTickets for help on using tickets.