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

    Popular posts from this blog

    Eclipse CDT variable colors in editor -

    AJAX doesn't send POST query -

    wpf - Custom Message Box Advice -