切换/手风琴功能在模态内不起作用

时间:2013-07-24 06:29:36

标签: jquery html css jquery-ui-accordion

我有index.html页面。在那里我有一个视图细节超链接,我在同一页面本身(HTML,JS代码)实现了手风琴功能,它工作正常。

但我的问题是ONCLICK查看详细信息链接我解雇了一个自定义模式弹出窗口。我希望在模态窗口中集成手风琴功能。

我以这种方式将我的手风琴功能检索到html中

var buildHTML = $('#dealerdemopopup').html();
$("#multiSubModal").append(buildHTML);

手风琴html代码完全进入模态窗口,但accordion/toggle功能在模态内部无效。

我想知道,检索HTML的方式是正确的。

请帮助我尽快解决这个问题。提前谢谢

This is accordion/Toggle HTML code in index.html file
------------------------------------------------------
<!-- Dealer Demo HTML START-->
<div class="dealerdemopopup" id="dealerdemopopup" style="display:block;">
<div class="dealer_demo" id="dealer_demo">
    <div class="dealer_accordion">
        <div class="expand"><a href="javascript:void(0);" class="packageTitle">&lt;Package 01&gt;</a></div>
            <div class="collapse">
                <div class="accCntnt">
                    <p class="packageContent">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
        <div style="height:5px;"></div> 
        <div class="expand"><a href="javascript:void(0);" class="packageTitle">&lt;Package 02&gt;</a></div>
            <div class="collapse">
                <div class="accCntnt">
                    <p class="packageContent">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>  
        <div style="height:5px;"></div>
        <div class="expand"><a href="javascript:void(0);" class="packageTitle">&lt;Package 03&gt;</a></div>
            <div class="collapse">
                <div class="accCntnt">
                    <p class="packageContent">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>  

    </div>  
</div> 
</div>
<!-- Dealer Demo HTML END-->


This is accordion/Toggle JS code in index.html file
---------------------------------------------------

<script  type="text/javascript" language="javascript">
    $(document).ready(function(){
    $('.dealer_demo div.dealer_accordion:eq(0)').find('div.expand:eq(0)').addClass('openAd').end()
    .find('div.collapse:gt(0)').hide().end()
    .find('div.expand').click(function() {
        $(this).toggleClass('openAd').siblings().removeClass('openAd').end()
        .next('div.collapse').slideToggle().siblings('div.collapse:visible').slideUp();
        return false;
    });
});
</script>

The following JS code in other js file to create custom modal popup window
--------------------------------------------------------------------------
function dealerdemoPopup()
        {

            $("#modalHolder .modalContent #modalSpinner").remove();
            $("#multiSubModal").show();
            $("#multiSubModal").openModal();
            $("#multiSubModal").width(450);
            $("#multiSubModal .subTableDiv").hide();
            Cvp.modal.elem.sizeModal();
            var popTitle = '<h3>Package &amp; Features</h3>';
            var buildHTML = $('#dealerdemopopup').html();
            var buildClosebtn = '<div class="buttons"><a class="button2" style="float:right;" id="btnMulClose" href="javascript:void(0)"><span>Close</span></a></div>';
            $("#multiSubModal").append(popTitle, buildHTML, buildClosebtn);
            $("#btnMulClose").bind("click",function(){
            Cvp.modal.elem.closeModal();
            $("#multiSubModal").hide(); 
        });
        }

0 个答案:

没有答案