单击 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>
2 回答
一只名叫tom的猫
TA贡献1906条经验 获得超2个赞
只是委托
$('.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>
隔江千里
TA贡献1906条经验 获得超10个赞
我已经弄清楚我的问题了。
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>
添加回答
举报
0/150
提交
取消