单击 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>