jquery实现点击按钮显示和隐藏内容
我们做网站时，由于网站版面的高度限制，需要某些版块内容默认隐藏，当点击某个按钮时，才全部显示出来。例如手机网站制作时，网站导航菜单就是常见的案例。
怎么做这样的点击按钮显示和隐藏内容功能呢？这需要使用jquery代码。
方法一：控制某个指定DIV的下拉隐藏与显示
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(".btn").click(
function(){
$(".divbox").slideToggle();
});
</script>
代码解释：
.btn是点击按钮的class类，可以改成自己的class名；
.divbox是需要显示/隐藏的DIV的class名。
还可以使用以下的代码来添加和去除class类
$("#subNav li i").click(function(){
$(this).parent().find(".sub-menu").slideToggle();
$(this).parent().toggleClass("open");
});
方法二：控制某个指定DIV的隐藏与显示
<script>
$(".am-pc-sharebtn").click(
function(){
$(".am-pc-share").toggle();
});
</script>
如何使用：
很简单，将以上的代码放到自己做的网站底部</body>标签上面，将里面的class名改成自己网站的类名。
实现点击添加Class再点击去除Class的效果：https://www.xuewangzhan.net/why/zixue/68122.html
方法三：光标经过时，展开当前的二级栏目
<script>
$("#subNavs>ul>li").hover(function () {
$(this).children("ul").stop().slideToggle();
})
</script>
也可以使用以下的代码实现相同的效果
/*代码来源：学做网站论坛：https://www.xuewangzhan.net/jquery/23429.html*/
<script>
$(".nav_first>li").hover(function () {
$(this).children("ul").show()
}, function () {
$(this).children("ul").hide()
})
</script>
还可以这样写：
$(".menu li").hover(function() {
$(this).find(".sub-menu").stop(true,true).slideDown("fast");
}),
$(".menu li").mouseleave(function() {
$(this).find(".sub-menu").stop(true,true).slideUp("fast");
});
方法四：光标点击后，展开当前的二级栏目（自动去除点击元素的链接，并带判断是否有子栏目）
<script>
$("#subNavs>ul>li>a").click(function () {
if($(this).next("ul").length > 0){
$(this).attr("href","javascript:void(0)");
$(this).next("ul").stop().slideToggle();
}
})
</script>
如果需要给带有子分类的父分类添加“+”，可以加上以下的代码：
<script>
//循环追加动态元素
var nll= $('.prolists>li').length;
for(var i=1;i<=nll;i++){
if($('.prolists>li:nth-child('+i+')>a').next("ul").length > 0){
$('.prolists>li:nth-child('+i+')>a').append('<span class="fright">+</span>');
}
}
</script>
