Heim > Web-Frontend > HTML-Tutorial > 两个span标签隐藏后再显示不在同一行_html/css_WEB-ITnose

两个span标签隐藏后再显示不在同一行_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-24 11:38:55
Original
2109 Leute haben es durchsucht

最近在做树图,自己手写的,现在突然发现个问题,我在一行放置了两个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;}
Nach dem Login kopieren

HTML:
<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>
Nach dem Login kopieren

JS:
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");	}	}
Nach dem Login kopieren

召唤一下各位大神:@蝶恋花雨 @苏小喵 @sysdzw @人生难得一只鸡 @豪情


回复讨论(解决方案)

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");	}	}
Nach dem Login kopieren
Nach dem Login kopieren

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");	}	}
Nach dem Login kopieren
Nach dem Login kopieren

忘记这回事儿了,多谢!


你css中设置的是inline-block
重新显示时也可以设置为inline-block
$(".level1").children("span").css("display", "inline-block");

或者用hide()和show()显示隐藏,这个会自动记录元素之前的显示状态

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage