データを入力するために複数の入力ボックスを追加する必要があります。最初は入力ボックスが 1 つしかなく、生成された各入力ボックスの横に「追加」ボタンがあり、複数のテキスト ボックスを生成します。
私のフィドルを見ると、1 番目のレベルに 3 レベルのテキスト ボックスがあり、1 レベルのデータのみを入力するオプションがありますが、レベル 2 になると、同じ親ブロックの 2 番目のレベルを作成するオプションがあるはずです。メイン見出しのサブデータを入力できます。たとえば、州名を書くと、サブカテゴリを入力できるはずです..
第 1 レベル メニューのコードは次のとおりです。
$(document).ready(function(){
$(":radio").click(function(){
$(".test").hide();
var show = $(this).attr("data-show");
$("#"+show).show(300)
});
$('.sort').hide();
$filtr = $('.filtr');
$filtr.on('click', '.add', function(){
$(this).closest('.loop').clone().appendTo( $(this).closest('.test') );
$('.sort').show();
});
$filtr.on('click', '.del', function(){
$(this).closest('.loop').remove();
});
$('#1lev, #2lev, #3lev').hide();
//For sort up/down
function moveUp(item) {
var prev = item.prev();
if (prev.length == 0)
return;
prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
prev.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertBefore(prev);
});
}
function moveDown(item) {
var next = item.next();
if (next.length == 0)
return;
next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
next.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertAfter(next);
});
}
$(".filtr").sortable({ items: ".loop", distance: 10 });
$(document).on("click", "button.sort", function() {
var btn = $(this);
var val = btn.val();
if (val == 'up')
moveUp(btn.parents('.loop'));
else
moveDown(btn.parents('.loop'));
});
});
必要な結果
class="filtr" div第 1 レベルのパネルとまったく同じように機能する第 2 レベルのパネルをクローンするにはどうすればよいですか?
予想されるコード構造は次のようになります
<div class="filtr">
<!-- we'll clone this one... -->
<div class="test" id="2lev">
<div class="loop">
<button value='up' class="sort">Up</button>
<button value='down' class="sort">Down</button>
<input type="text" />
<button class="btn del">x</button>
<button class="btn add">Add</button> <button class="btn level">></button>
<!--Need to add this div here-->
<div class="filtr">
<!-- we'll clone this one... -->
<div class="test">
<div class="loop">
<button value='up' class="sort">Up</button>
<button value='down' class="sort">Down</button>
<input type="text" />
<button class="btn del">x</button>
<button class="btn add">Add</button>
</div>
</div>
<!-- here ...-->
</div>
<!--Need to add this div here-->
</div>
</div>
<!-- here ...-->
</div>