2013-04-09 91 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內容權的內容?