今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下。
百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决问题的方法。
简单讲就是通过jq的toggle方法分别写两个点击事件。
<html>
<head>
<title>jquery - 通过点击切换文字</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<script>
$(document).ready(function(){
$(".dj").toggle(function(){
$(".info_main").show();
$(".dj").text("-")},
function(){
$(".info_main").hide();
$(".dj").text("+")}
);
});
</script>
<body>
<div class="info_tit">展开:<span class="dj">+</span></div>
<div class="info_main" style="display:none">
隐藏内容。
</div>
</body>
</html>
这样一来就清爽很多啦。