js点击li隐藏显示却没有反应

Question

今天写了个点击隐藏显示只成功了一半，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;
}

Answer 1

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>