js点击li隐藏显示却没有反应
今天写了个点击隐藏显示只成功了一半，dl默认是隐藏（display:none），在点击li的时候会显示dl的内容，再点击会隐藏dl的内容，现在是i的样式改变了，dl却没有被操作到，因为之前写过这种都没问题，这次不知道咋回事，哪位能帮忙看下嘛
<ul>
<li class="wow fadeInUp">
<div class="liebiao">
<div>古代世界研究助理教授</div>
<div>博士后</div>
<div>2023年05月29日</div>
<i class="sp_nav_xjb"></i>
</div>
<dl>
<dd>111111111</dd>
</dl>
</li>
<li class="wow fadeInUp">
<div class="liebiao">
<div>教学助理</div>
<div>博士</div>
<div>2023年06月19日</div>
<i class="sp_nav_xjb"></i>
</div>
<dl>
<dd>22222</dd>
</dl>
</li>
</ul>
<script type="text/javascript">
$(function(){
$('.xiala ul li').click(function () {
$(this).find('dl').show(500);
// $(this).find('dl').hide();
$(this).parent().children('dl').slideToggle().parent().siblings().children('dl').slideUp();
$(this).find('i').toggleClass('job_i_se');
$(this).parent().siblings().find('i').removeClass('job_i_se');
});
$('.sp_nav_xjb').html('<svg t="1496193951932" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="995" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <path d="M768.468 428.876l-84.723-84.723-170.711 170.711-170.711-170.711-84.723 84.723 170.711 170.711-0.092 0.091 84.723 84.724 0.092-0.092 0.092 0.092 84.723-84.724-0.092-0.091z" p-id="996"></path></svg>');
});
</script>
.job ul{
list-style: none;
padding-inline-start: 0px;
}
.job ul li{
list-style:none;
box-shadow: 0 1px 15px 0px rgba(0,0,0,.1);
margin-bottom: 30px;
border-radius: 9px;
transition: 0.4s;
}
.job ul li i svg{
width: 20px;
height: 20px;
fill: #555;
}
.job ul li i svg{transform: rotate(0deg);transition: all ease 0.35s;}
.job ul li .job_i_se svg{fill:#c92924;}
.job ul li .job_i_se svg{transform: rotate(-180deg);transition: all ease 0.35s;}
.job ul li dl{
display:none;
}
.job ul li dl dd{
padding:15px 30px;
line-height:1.2;
}
TechWhizKid参考GPT回答：
你在点击事件中使用了选择器 '.xiala ul li'，但是从你给出的HTML中，并没有 .xiala 这个class。
如果你想要对所有的 li 标签都应用点击事件，你应该将选择器更改为 'ul li' 或者只是 'li'。
另外一点是，你似乎在一行中调用了两次显示和隐藏的方法：$(this).find('dl').show(500); 和 $(this).parent().children('dl').slideToggle().parent().siblings().children('dl').slideUp();，这可能会导致显示和隐藏的效果互相冲突。你可以尝试注释掉一行，看看效果是否正常。
你的代码应该修改为这样：
<script type="text/javascript">
$(function(){
$('li').click(function () {
$(this).find('dl').slideToggle();
$(this).find('i').toggleClass('job_i_se');
$(this).siblings().find('i').removeClass('job_i_se');
$(this).siblings().find('dl').slideUp();
});
$('.sp_nav_xjb').html('<svg t="1496193951932" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="995" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <path d="M768.468 428.876l-84.723-84.723-170.711 170.711-170.711-170.711-84.723 84.723 170.711 170.711-0.092 0.091 84.723 84.724 0.092-0.092 0.092 0.092 84.723-84.724-0.092-0.091z" p-id="996"></path></svg>');
});
</script>
改成以下两行即可，jquery toggle会自动切换
$('.xiala ul li').click(function () {
$(this).find('dl').slideToggle(500);
$(this).find('i').toggleClass('job_i_se');
});
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7511929
- 你也可以参考下这篇文章：js 实现拍照自动上传并且实现进度（七牛云演示）
- 除此之外, 这篇博客: js 深拷贝 浅拷贝，举例说明中的 1.我们怎么去实现深拷贝呢，这里可以递归递归去复制所有层级属性。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
function deepClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ //判断ojb子元素是否为对象，如果是，递归复制 if(obj[key]&&typeof obj[key] ==="object"){ objClone[key] = deepClone(obj[key]); }else{ //如果不是，简单复制 objClone[key] = obj[key]; } } } } return objClone; } let a=[1,2,3,4], b=deepClone(a); a[0]=2; console.log(a,b);
跟之前想象的一样，现在b脱离了a的控制，不再受a影响了。这里再次强调，深拷贝，是拷贝对象各个层级的属性，可以看个例子。JQ里有一个extend方法也可以拷贝对象，我们来看看
那是不是说slice方法也是深拷贝了，毕竟b也没受a的影响，上面说了，深拷贝是会拷贝所有层级的属性，还是这个例子，我们把a改改
拷贝的不彻底啊，b对象的一级属性确实不受影响了，但是二级属性还是没能拷贝成功，仍然脱离不了a的控制，说明slice根本不是真正的深拷贝。