动态地向jQuery accordion部分添加内容

时间:2013-04-09 06:50:36

标签: php javascript jquery html accordion

标题可能暗示重复的提示,但问题当然不是。

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

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

我创建了一些看起来像这样的html(这只是很大代码的一小部分)..

enter image description here

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>

现在我还创建了一个可以在点击高级单选按钮时显示的手风琴: -

enter image description here

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的元素。

enter image description here

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

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

注意:请不要建议我为元素添加不同的ID,并通过php包含它们。我希望在工具的基本部分出现的手风琴互联网层部分中所有相同的内容出现相同的内容。

任何帮助表示赞赏...

由于

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

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

也许我不理解你的问题,但是你想要.ilayer内容中的.s内容吗?