将内容动态添加到 jQuery 手风琴部分答案

【问题标题】：Add content to jQuery accordion section dynamically将内容动态添加到 jQuery 手风琴部分
【发布时间】：2013-04-09 06:50:35
【问题描述】：

标题可能暗示重复，但问题肯定不是。

如果是重复的，请通过发布问题的相关链接来关闭它。

现在这里是我的问题的描述 ->

我创建了一些看起来像这样的 html（这只是非常大代码的一小部分）..

Html 内容如下：-

<div class="s">
    <div class="bmargin">
        <label for="sip" > Source IPv6 Address </label>
        <input type="text" name="sip" id="sip" required  placeholder="hello" autofocus/>
    </div>

    <div class="bmargin marginl">
        [Default : Link-layer]
    </div>

    <div class="bmargin">
        <label for="dip"> Destination IPv6 Address </label>
        <input type="text" name="dip" id="dip" placeholder="FF02::1"/>
    </div>

    <div class="bmargin marginl">
        [Default : All Node Multicat Address]
    </div>
  </div>

现在我还创建了一个手风琴，当单击高级单选按钮时会显示它：-

Accordion Jquery 代码如下所示：

 $(document).ready(function() {
    $("#stack").accordion({ heightStyle:"content", fillspace: true,
                                    icons: {'header': 'ui-icon-plus', 'headerSelected':    
     'ui-icon-minus'},collapsible: true, active:false});

手风琴内容的 HTML：

<div class="advanced" id="stack">

<h3> <a href="#"> Network Interface Layer </a> </h3>
<div class="nlayer">
    This section is reserved for future
</div>

<h3> <a href="#" id="ilayer"> Internet Layer </a></h3>
<div class="ilayer">
<!--    <?php // require 'common_ilayer.html' ?> 
-->
</div>

<h3> <a href="#"> Transport Layer </a></h3>
<div>reserved for future</div>

<h3> <a href="#"> Application Layer </a></h3>
<div>reserved for future</div>

</div>

我需要的是显示相同的 html div class="s"，它最初显示在 php require 'common_ilayer.html'单击 Internet 层时出现。

我需要实现的是这样的（如下图所示）.. 但不创建任何重复节点。首先，php require/include 似乎可以工作，但确实会创建重复的代码，并且服务器可能会在发布时变得混乱，因为会有两个具有相同 ID 的元素。

我也试过这个 jQuery 代码，但没有帮助

 $('#ilayer').live("click",function(){
            $(".s").show();
    });

注意：请不要建议我为元素添加不同的 ID 并通过 php.ini 包含它们。我希望在工具的基本部分中出现的手风琴 Internet 层部分中的所有字段都显示相同的内容。

任何帮助表示赞赏...

谢谢

【问题讨论】：

你可以在 jsfiddle 中添加这个吗？

标签： php javascript jquery html accordion

【解决方案1】：

在页面加载时将 #ilayer 留空。

点击复选框时移动div.s节点：

$('#basic').click(function(){
    var $div = $('div.s');
    $('#basicDialog').append( $div );
});

$('#advanced').click(function(){
    var $div = $('div.s');
    $('#ilayer').append( $div );
})

【讨论】：

完美，正是我所需要的。我不知道可以移动节点......相反，我正在尝试创建重复节点的 html() 函数。非常感谢...

【解决方案2】：

 $('#ilayer').live("click",function(){
       $('.ilayer').html($(".s").html());
 });

也许我没有正确理解你的问题，但是你想要 .ilayer 内容中的 .s 内容对吗？

【讨论】：