Ajax jquery-ui accordion_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-28 21:16 出处：网络

I init my accordion in the following way: $(function() { $(\"#gallery_accordion\").accordion({ event: false });

I init my accordion in the following way:

$(function() {
  $("#gallery_accordion").accordion({ event: false });
  $("#gallery_accordion").click(function(e) {
    var contentDiv = $(this).next("div");
    contentDiv.load($(this).find("a").attr("href"));
  }); 
});

The content is loaded onclick but the accordion is invisible. Nothing is开发者_运维问答 shown. Any help highly appreciated.

Thanks.

Update: The height stays at '0'. Any reason for that?

Here is the markup:

<div id="gallery_accordion">
    <h3><a href="javascript:getGallery('369');">My first gallery</a></h3>
    <div id="gallery369">
    </div>

    <h3><a href="javascript:getGallery('381');">The second gallery</a></h3>
    <div id="gallery381">
    </div>
</div>

Try changing your initial call to:

$("#gallery_accordion").accordion({ header: "h3", event : false });

And your HTML to:

<div id="gallery_accordion">
<div>
    <h3><a href="javascript:getGallery('369');">My first gallery</a></h3>
    <div id="gallery369">
    </div>
</div>
<div>
    <h3><a href="javascript:getGallery('381');">The second gallery</a></h3>
    <div id="gallery381">
    </div>
</div>
</div>

Each of your cells needs to have its own div tag and in the initial call you have now set the header to the H3 tag.

Hope this helps.

Here is a sample doc that loads the accordion:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                // Accordion
                $("#gallery_accordion").accordion({ header: "h3"});
                $("#gallery_accordion a").click(function(evt) {
          var galleryId = $(this).attr('href').split('#')[1];
          var contentDiv = $('#' + 'gallery' + galleryId);
          if(contentDiv.html() == "&nbsp;") {
            var galleryContent = getGallery(galleryId);
            contentDiv.html(galleryContent);
          }
        });
                var galleryIdI = $('#gallery_accordion div div:first').attr('href').split('#')[1];
        var contentDivI = $('#' + 'gallery' + galleryId);
                var galleryContentI = getGallery(galleryId);
                contentDivI.html(galleryContentI);
            });
        </script>
    </head>
    <body>
    <!-- Accordion -->
        <h2 class="demoHeaders">Accordion</h2>
        <div id="gallery_accordion">
            <div>
                <h3><a href="#369">Gallery 1</a></h3>
                <div id="gallery369">&nbsp;</div>
            </div>
            <div>
                <h3><a href="#381">Gallery 2</a></h3>
                <div id="gallery381">&nbsp;</div>
            </div>
            <div>
                <h3><a href="#392">Gallery 3</a></h3>
                <div id="gallery392">&nbsp;</div>
            </div>
        </div>
</body>
</html>