JQuery accordion doesn't work without h3 tags

问题

I am trying to make an accordion with JQuery and am running into some trouble. The JQuery website shows to create your accordion content like this.

<div id="accordion">
    <a href="#">First header</a>
    <div>First content</div>
    <a href="#">Second header</a>
    <div>Second content</div>
</div>

When I do this the accordion doesn't work right and something is wrong with the formatting. If I put h3 tags around the header anchors like so

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

It works. Does anyone know why this happens? It happens in Firefox 3.5 and IE 8. I also just downloaded the JQuery files today.

-Thanks

回答1:

You must initialize the accordion with the header option specified:

$('#accordion').accordion({ 
  header: 'a' 
});

You also might want to check out the jQuery Accordion API for more options.

回答2:

You must set the appropiate header option.

In your case you want to use the anchors as the headers:

$('#accordion').accordion({
  header: "a"
});

回答3:

try this instead

<script>

jQuery( "#accordion" ).accordion({heightStyle: "content",header: 'h3' });

</script>

This will works fine in IE

来源：https://stackoverflow.com/questions/1183751/jquery-accordion-doesnt-work-without-h3-tags