2013-04-09 88 views
0

标题可能暗示着重复的提示,但问题肯定不是。将内容动态添加到jQuery手风琴部分

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

现在,这里是我的问题的说明 - >

我已经创造了一些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

手风琴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类=“s”这是最初显示的位置php要求'common_ilayer .html'在点击Internet层时出现。

我需要实现的是这样的(图片显示如下)..但没有创建任何重复的节点。首先,php require/include看起来像是在工作,但确实会产生重复的代码,服务器在发布时可能会变得混乱,因为会有两个具有相同ID的元素。

enter image description here

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

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

注:请不要建议我到不同的ID添加到元素,并用PHP的包括它们。我要在工具的基本部分出现的手风琴互联网层节中出现与所有字段相同的内容。

赞赏任何帮助...

感谢

+0

可以ü中的jsfiddle补充一点:

上的复选框,当点击

移动div.s节点? – rab 2013-04-09 07:05:24

回答

1

将页面加载时为空#ilayer为空。

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

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

完美的是我所需要的。我不知道有可能移动节点...而是我正在尝试'html()'函数创建重复节点。非常感谢 ... – 2013-04-09 16:52:36

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

也许我不明白你的问题的权利,但你要.S在.ilayer内容权的内容?