Side navigation
#10041 closed bug (invalid)
Opened August 12, 2011 09:57PM UTC
Closed August 16, 2011 05:21AM UTC
Last modified August 26, 2011 05:10AM UTC
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?
Attachments (0)
Change History (3)
Changed August 12, 2011 09:59PM UTC by comment:1
Changed August 16, 2011 05:21AM UTC by comment:2
| component: | unfiled → effects |
|---|---|
| priority: | undecided → low |
| resolution: | → invalid |
| status: | new → closed |
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.
Changed August 26, 2011 05:10AM UTC by comment:3
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.
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.