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的效果：http://ke.xuewangzhan.net/post/68122.html

方法三：光标经过时，展开当前的二级栏目

<script>

$("#subNavs>ul>li").hover(function () {

$(this).children("ul").stop().slideToggle();

})

</script>

也可以使用以下的代码实现相同的效果

/*代码来源：学做网站论坛：http://ke.xuewangzhan.net/post/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>

光标经过时添加class类，同级别的删除class类：

$('li').hover(

function() { // 鼠标经过当前项

$(this).addClass('active').siblings().removeClass('active');

}

);

toggleClass() 方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){

  $("h1,h2,p").toggleClass("blue");

});