javascript - 在 html 和 javascript 中根据手风琴选项卡的点击显示特定内容

Question

我需要一些有关手风琴选项卡功能的帮助，我需要在表单右侧显示该手风琴选项卡的具体内容。我在表格的左侧有所有手风琴。

这是我正在处理 HTML 和 JS的代码：

$(document).ready(function() {
 // activate Nestable for list 1
        $('#nestable').nestable({
                group: 1
            })
            .on('change', updateOutput);


 // output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));

$('#nestable-menu').on('click', function(e) {
   var target = $(e.target),
   action = target.data('action');
   if (action === 'expand-all') {
       $('.dd').nestable('expandAll');
    }
  if (action === 'collapse-all') {
    $('.dd').nestable('collapseAll');
    $('.content:visible').slideUp();
   }
  });

$(function() {
   var nestablecount = 2;
   $('#appendnestable').click(function() {
       $('ol.outer').append('<li class="dd-item dd3-item" data-id="' + nestablecount +
                    '"><div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="' + nestablecount + '">Item ' + nestablecount + '</div><div id="c-' +
          nestablecount + '" class="content"><form role="form-' + nestablecount +
                    '"><div class="form-group"><label for="name">Name</label><input type="text" class="form-control" id="name" placeholder="Phyllis Wheatley"></div><div class="form-group"><label for="name">Add a Description</label><textarea class="form-control" rows="3" placeholder="Quite the poet"></textarea><div class="checkbox"><label><input type="checkbox" value="">Now you know it ;)</label><button type="submit" class="btn btn-default btn-xs pull-right">Yes</button></div></div></form></div></li>'
                );
      updateOutput($('#nestable').data('output', $('#nestable-output')));
      nestablecount++;
  });
        });
}
});

<div class="col-lg-6">
     <div class="card">
        <div class="card-body">
            <div id="wrapper">
                <div class="panel-group" id="accordion">
                </div>
                <div class="dd" id="nestable">
                   <ol class="dd-list outer">
                     <li class="dd-item dd3-item" data-id="1">
                        <div class="dd-handle dd3-handle">Drag</div>
                            <div class="dd3-content" name="1">
                             Item 1 
                             <span class="label label-default">New
                             </span>
                             </div>
                              
                      </li>
                   </ol>
                 </div>
                 <div id="nestable-menu">
                 <button type="button" class="btn btn-default" id="appendnestable">
                   <i class="fa fa-magic"></i> 
                   Add
                 </button>
                 </div>
             </div>
           </div>
        </div>
     </div>
<div class="col-lg-6">
 <p><pre id="nestable-output"></pre></p>
</div>

我正在寻求帮助的是nestable-output，如果我单击了 ITEM 1，我需要显示诸如 Clicked tab 1 之类的内容，依此类推。

这是jsfiddle

这是我想要实现的参考：

标签： javascripthtmljquery

Answer 1

您可以为标签编​​写click事件，以便在其单击时获取值，然后在匹配的地方使用此显示/隐藏 div。lidata-idids

演示代码：

$('#nestable').nestable({
  group: 1
})


$(function() {
  var nestablecount = 1;
  $('#appendnestable').click(function() {
    $('ol.outer').append('<li class="dd-item dd3-item" data-id="' + nestablecount + '"><div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="' + nestablecount + '">Item ' + nestablecount + '</div></li>');
    //append this inside nestable op
    $("#nestable-output").append('<div id="c-' +
      nestablecount + '" class="content"><form role="form-' + nestablecount + '"><div name="' + nestablecount + '">Item ' + nestablecount + '</div><div class="form-group"><label for="name">Name</label><input type="text" class="form-control names" placeholder="Phyllis Wheatley"></div><div class="form-group"><label for="name">Add a Description</label><textarea class="form-control" rows="3" placeholder="Quite the poet"></textarea><div class="checkbox"><label><input type="checkbox" value="">Now you know it ;)</label><button type="button" class="btn btn-default btn-xs pull-right save">Yes</button></div></div></form></div>')
    $("#c-" + nestablecount).hide() //hide them
    nestablecount++;
  });
});

//onclick of li tag
$(document).on('click', '.dd-item', function() {
  var ids = "c-" + $(this).data('id') //get data-id
  //show that div
  $('#nestable-output div.content').not($("#" + ids)).hide()
  $("#" + ids).toggle() //hide other


})

//on click of yes :
$(document).on("click", ".save", function() {
  //get values 
  var new_names = $(this).closest("form").find(".names").val();
  var counts = $(this).closest('form').find("div[name]").attr('name');
  if (new_names != "") {
    //change them
    $(this).closest('form').find("div[name]").text(new_names)
    $(".outer li[data-id=" + counts + "] .dd3-content").text(new_names)
  } else {
    $(this).closest("form").find(".names").focus();

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery.nestable.css">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery.nestable2.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery-ui-1.10.4.custom.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <div id="wrapper">
          <div class="panel-group" id="accordion">
          </div>
          <div class="dd" id="nestable">
            <ol class="dd-list outer">

            </ol>
          </div>
          <div id="nestable-menu">
            <button type="button" class="btn btn-default" id="appendnestable">
            <i class="fa fa-magic"></i>
            Add
          </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div id="nestable-output"></div>
  </div>
</div>