0

divを動的にロードするためのアコーディオンの実装に取り​​組んでいます。問題は、このスクリプトとhtmlコーディングが非同期にロードされるスクリプトファイルです。

  $("#leftNavBusinessCounts").append('<div class="SearchDetails"><strong> One-Stop Services  </strong><br></br>View Centers by specific services.</div>');
        $("#leftNavBusinessCounts").append('<div class="sliding-drawer one-stop-details"><h2>Business Services</h2><div>');
        $(xml).find('FilterSection').eq(2).find("FilterItem").each(function() {
             $("#leftNavBusinessCounts").append('<div>HI</div>');
          });
        $("#leftNavBusinessCounts").append('</div></div>');//this is closing even before the <div>HI</div> is loaded ,so its outside.

ここに画像の説明を入力してください

画像でわかるように、アコーディオンを開いたり閉じたりすると、値はアコーディオンの外に出てきます。問題は次のとおりです。

ファイアバグコードは次のようなものですここに画像の説明を入力してください

ですから、以前にdivがどのように閉じているのかわかりません。私が使用しているjqueryスクリプトとcssを参照してください。

<style type="text/css">
    .one-stop-details h2 { 
        display: block; 
        padding: 10px 0px 10px 30px; 
        background-image: url('/COSImages/expanding_section_background_closed.png'); 
        background-position: right; 
        border: 2px solid #ededed; 
        -moz-border-radius: 8px; 
        border-radius: 8px; 
        cursor: pointer; 
        margin: 0px;
    }

    div.sliding-drawer { 
        margin: 10px 0px 10px 0px; 
    }

    .sliding-drawer div {
         display: none; 
         padding: 5px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('.sliding-drawer h2').click(function () {
            $(this).parent().children('.sliding-drawer div').slideToggle('slow');
            if ($(this).css("background-image").indexOf('/COSImages/expanding_section_background_closed.png') == -1) {
                $(this).css("background-image", "url('/COSImages/expanding_section_background_closed.png')");
            }
            else {
                $(this).css("background-image", "url('/COSImages/expanding_section_background_open.png')");
            }
        });
    });

</script>

重要なものが欠けていますか?ありがとう。

4

1 に答える 1

-1

動的に生成された要素のイベントにlive()を試すclick

$('.sliding-drawer h2').live('click',function () {
于 2012-09-07T15:31:22.500 に答える