Jquery实现两个span隐藏和显示

发布网友发布时间：2022-04-27 03:35

共2个回答

懂视网时间：2022-04-21 13:17

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

HTML：

dddddd

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");	}	}

召唤一下各位大神：@蝶恋花雨 @苏小喵 @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");	}	}

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()显示隐藏，这个会自动记录元素之前的显示状态

热心网友时间：2022-04-21 10:25

首先你要获取文本框
2个span
的id或者样式：
$(function(){
var
Txt=$("文本框的样式或者id");
var
Span1=$("span1的样式或者id");
var
Span2=$("span2的样式或者id");
Txt.click(function(){
//点击文本框就判断文本框下的span1等于显示就隐藏span1然后显示span2
if(Span1.css("display")=="block"){
Span1.css("display“,"none");
Span2.css("display","block");
}
//如果你还要在点击就显示span1隐藏span2
else{
Span1.css("display“,"block");
Span2.css("display","none");
}
});
});