list - jquery toggle on dt element working in Firefox but not other browsers -
The following works in Firefox but there is no other browser. & lt; Dl & gt;
Are different child relationships?
$ ('dd'). Parent (). ('H3'). Toggle (function () ($ (this) .next ('dd') Slidedown (500);}, function ($ (this) .next ('dd') SlideUp (500); });
looks like HTML:
& lt; dt & gt; & lt; h3 & gt; to make things clickable & Lt; / h3 & gt; & lt; / dt & gt; & lt; dd & gt; & lt; p & gt; Accessories may look like with internal elements in dd & lt; / p & gt; & Lt; ul & gt; Stuff1 Luggage 2 Accessories 3 & lt ; / Li & gt; & lt; / ul & gt;
Your work argument is incorrect, but it works in Firefox Yes because it works with your HTML, different than the other browsers.
The next ()
function looks at the immediate brother of the element in the question you can call it H3
element:
& lt; dt & gt; & lt; h3 & gt; to click on the content & lt; / h3 & gt; & lt ; / Dt>
As you can see, the h3
tag has no immediate siblings. It has no siblings (and thus Any next ()
).
So why does Firefox work? Because your HTML is also invalid, only inline
element and h3
tag are not inline tags according to the dt
tag. Why does this happen Because different browsers do different deals with invalid documents. Firefox, in this case, excludes h3
tag or dt
tag, leaving your document structure in this way:
& lt ; Dt & gt; & Lt; / Dt & gt; & Lt; H3 & gt; To be clicked on & lt; / H3 & gt; & Lt; Dd & gt; & Lt; P & gt; The stuff can look like this with internal elements in the dd & lt; / P & gt; & Lt; Ul & gt; & Lt; Li & gt; Stuff1 & lt; / Li & gt; & Lt; Li & gt; Luggage 2 & lt; / Li & gt; & Lt; Li & gt; Accessories 3 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Dd>
Then in Firefox, the h3
element actually becomes a sibling with the dd
tag, and your code works though In other browsers (like Chrome, tested on), the h3
tag resides inside the dt
tag and your code does not work.
Comments
Post a Comment