單擊 li 或鏈接時添加 div

Question

單擊 li 或鏈接時，我想添加一個新的 div

問題是當我點擊它工作的第一個 div 時。 但是我想在單擊前一個 li 時添加一個 div 。 假設，當我單擊“1”時，將創建一個新的 div“2”。 然后，如果我單擊“2”，則會打開一個新的 div“3”，依此類推。 之后，如果我單擊任何以前的 div，除了下一個 div 和以前的 div 之外，所有 div 都將關閉。 假設有 1,2,3,4,5 div 打開。 如果我點擊 2，只會看到 1,2,3 div。 其他人會隱藏。

我怎樣才能做到這一點？

 $('.title').on('click', function(e) { var isPresent = false; var whoIsIt = $(this).attr('data'); $('#data.data').each(function(index, element) { if ($(this).attr('data-conversation-between') == whoIsIt) { isPresent = true; } }); if (.isPresent) { $('#data').append('<div class="data" data-conversation-between="' + whoIsIt + '"><ul><li class="title"><a href="#"><img src="img/1;jpg" class="profile" alt=""><div class="details"> <p>Tusher</p><p>Designation</p></div></a> </li></ul> </div>'); } }). $(document).ready(function() { $("li").click(function() { $("li");removeClass("active"). $(this).parent();prepend($(this)). $(this);addClass("active"); }); });

 ul { padding: 0px; }.data { border: 1px solid; margin: 5px; float: left; width: 13%; }.data a { text-decoration: none; }.data ul { list-style-type: none; }.profile { height: 40px; width: 40px; float: left; margin: 0px 13px; }.details { font-size: 13px; } li.title { border-bottom: 2px solid #ddd; overflow: hidden; margin-bottom: 5px; padding: 5px 0; }.active { background: #ececec; } p { margin: 0px; padding: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div class="data"> <ul> <li class="title"> <a href="#"> <img src="img/1.jpg" class="profile" alt=""> <div class="details"> <p>Tusher</p> <p>Designation</p> </div> </a> </li> </ul> </div> <div id="data"> </div>

Answer 1

只是委托

$('.main').on('click','.title:last', function(e) {

和

$('#data').on('click', '.title', function(e) {
  const hasMore = $(this).closest(".data").next().length;
  if (hasMore>0) $(this).closest(".data").siblings().remove(); // this should have worked
})

 $(function() { $('.main').on('click', '.title:last', function(e) { const $new = $(this).closest('.data').clone(); $('.details p',$new).text('Tusher '+$('.main.data').length) $('.main').append($new) }); $('.main').on('click', '.title', function(e) { const hasMore = $(this).closest('.data').nextAll().length if (hasMore > 1) { $(this).closest(".data").siblings().remove(); } }) });

 ul { padding: 0px; }.data { border: 1px solid; margin: 5px; float: left; width: 13%; }.data a { text-decoration: none; }.data ul { list-style-type: none; }.profile { height: 40px; width: 40px; float: left; margin: 0px 13px; }.details { font-size: 13px; } li.title { border-bottom: 2px solid #ddd; overflow: hidden; margin-bottom: 5px; padding: 5px 0; }.active { background: #ececec; } p { margin: 0px; padding: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div class="data"> <ul> <li class="title"> <a href="#"> <img src="img/1.jpg" class="profile" alt=""> <div class="details"> <p>Tusher</p> <p>Designation</p> </div> </a> </li> </ul> </div> </div>

Answer 2

我已經弄清楚了我的問題。

 function childData(_id) { var tRow = $(".organogram li").length, row = parseInt(_id)+1; for (var i = row; i <= tRow; i++) { $("#dept-"+i).remove(); } var data = "<li id='dept-"+row+"' class='team'>" +"<div class='data'><ul> " +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher1</p><p>Designation</p></div></a> </li>" +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher2</p><p>Designation</p></div></a> </li>" +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher3</p><p>Designation</p></div></a> </li>" +"</ul> </div></li>"; $(".organogram").append(data); } function thisNode(_this){ var _id = $(_this).closest(".team").attr("id").match(/\d+/); $(_this).closest("ul").find("li").removeClass( "active" ); $(_this).addClass( "active" ); $(_this).closest("ul").prepend($(_this)); childData(_id); }

 ul{ padding:0px; list-style-type: none; }.data { border: 1px solid; margin: 5px; float: left; width: 13%; }.data a{ text-decoration: none; }.data ul{ list-style-type: none; }.profile{ height: 40px; width: 40px; float: left; margin: 0px 13px; }.details{ font-size: 13px; } li.title { border-bottom: 2px solid #ddd; overflow: hidden; margin-bottom: 5px; padding: 5px 0; }.active{ background:#ececec; } p{ margin:0px; padding: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="organogram"> <li id='dept-1' class='team'> <div class='data'> <ul> <li class='title' onclick='thisNode(this)'> <a href='#'> <img src='img/1.jpg' class='profile' > <div class='details'> <p>Tusher1</p> <p>Designation</p> </div> </a> </li> <li class='title' onclick='thisNode(this)'> <a href='#'> <img src='img/1.jpg' class='profile' > <div class='details'> <p>Tusher2</p> <p>Designation</p> </div> </a> </li> <li class='title' onclick='thisNode(this)'> <a href='#'> <img src='img/1.jpg' class='profile' > <div class='details'> <p>Tusher3</p> <p>Designation</p> </div> </a> </li> </ul> </div> </li> </ul>