单击 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) {&nbsp; const hasMore = $(this).closest(".data").next().length;&nbsp; if (hasMore>0) $(this).closest(".data").siblings().remove(); // this should have worked})$(function() {&nbsp; $('.main').on('click', '.title:last', function(e) {&nbsp; &nbsp; const $new = $(this).closest('.data').clone();&nbsp; &nbsp; $('.details p',$new).text('Tusher '+$('.main .data').length)&nbsp; &nbsp; $('.main').append($new)&nbsp; &nbsp;&nbsp;&nbsp; });&nbsp; $('.main').on('click', '.title', function(e) {&nbsp; &nbsp; const hasMore = $(this).closest('.data').nextAll().length&nbsp; &nbsp; if (hasMore > 1) {&nbsp; &nbsp; &nbsp; $(this).closest(".data").siblings().remove();&nbsp;&nbsp; &nbsp; }&nbsp; })});ul {&nbsp; padding: 0px;}.data {&nbsp; border: 1px solid;&nbsp; margin: 5px;&nbsp; float: left;&nbsp; width: 13%;}.data a {&nbsp; text-decoration: none;}.data ul {&nbsp; list-style-type: none;}.profile {&nbsp; height: 40px;&nbsp; width: 40px;&nbsp; float: left;&nbsp; margin: 0px 13px;}.details {&nbsp; font-size: 13px;}li.title {&nbsp; border-bottom: 2px solid #ddd;&nbsp; overflow: hidden;&nbsp; margin-bottom: 5px;&nbsp; padding: 5px 0;}.active {&nbsp; background: #ececec;}p {&nbsp; margin: 0px;&nbsp; padding: 0px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="main">&nbsp; <div class="data">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li class="title">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="img/1.jpg" class="profile" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Tusher</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Designation</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></div>

Answer 2

我已经弄清楚我的问题了。&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function childData(_id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var tRow = $(".organogram li").length,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row = parseInt(_id)+1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;for (var i = row; i <= tRow; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#dept-"+i).remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var data =&nbsp; "<li id='dept-"+row+"' class='team'>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+"<div class='data'><ul> "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+"<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>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+"<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>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+"<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>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+"</ul> </div></li>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(".organogram").append(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function thisNode(_this){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var _id = $(_this).closest(".team").attr("id").match(/\d+/);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(_this).closest("ul").find("li").removeClass( "active" );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(_this).addClass( "active" );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(_this).closest("ul").prepend($(_this));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;childData(_id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ul{&nbsp; &nbsp; &nbsp; &nbsp; padding:0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;list-style-type: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.data {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border: 1px solid;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 13%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.data a{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.data ul{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;list-style-type: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.profile{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height: 40px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 40px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin: 0px 13px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.details{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;font-size: 13px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;li.title {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-bottom: 2px solid #ddd;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin-bottom: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding: 5px 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.active{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background:#ececec;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;p{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin:0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding: 0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp;<ul class="organogram">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li id='dept-1' class='team'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class='data'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class='title' onclick='thisNode(this)'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href='#'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src='img/1.jpg' class='profile' >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class='details'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Tusher1</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Designation</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class='title' onclick='thisNode(this)'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href='#'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src='img/1.jpg' class='profile' >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class='details'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Tusher2</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Designation</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class='title' onclick='thisNode(this)'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href='#'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src='img/1.jpg' class='profile' >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class='details'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Tusher3</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Designation</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</ul>