1

我有 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(); 
        });
        }
4

0 回答 0