最近在做树图，自己手写的，现在突然发现个问题，我在一行放置了两个span标签，前面是三角符号，后面是文字，这两个标签隐藏之后再次显示时第二个span换行了，我想可能是因为再次出现的时候被解析成了两个块级元素，在两个span中同时添加float:left，虽然没有明显换行，但是还是有错位，怎么破，以下是测试代码：
CSS：
.triangle-close{ display: inline-block; width: 0; height: 0; border-left: 8px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}<div><ul> <li class="level1"> <span class="triangle-close toggle" data-target="#level-con"></span> <span class="theme">dddddd</span> </li></ul><input class="btn" type="button" value="clickme" onclick="tt()"></div>
function tt(){ var t = $(".theme").css("display"); console.log(t); if(t == "none"){ $(".level1").children("span").css("display", "block"); $(".level1").children("span").css("float", "left"); } else{ $(".level1").children("span").css("display", "none"); } }
inline： 指定对象为内联元素。
block： 指定对象为块元素。
span默认是内联元素，重新显示时也要设置为内联元素
function tt(){ var t = $(".theme").css("display"); console.log(t); if(t == "none"){ $(".level1").children("span").css("display", "inline"); } else{ $(".level1").children("span").css("display", "none"); } }
inline： 指定对象为内联元素。
block： 指定对象为块元素。
span默认是内联元素，重新显示时也要设置为内联元素
function tt(){ var t = $(".theme").css("display"); console.log(t); if(t == "none"){ $(".level1").children("span").css("display", "inline"); } else{ $(".level1").children("span").css("display", "none"); } }
你css中设置的是inline-block
重新显示时也可以设置为inline-block
$(".level1").children("span").css("display", "inline-block");
或者用hide()和show()显示隐藏，这个会自动记录元素之前的显示状态
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
316
收藏
