想实现点击“.column h1”展开子菜单，再点击便隐藏子菜单的效果，为什么预览时整个column都会消失呢？ 50

我想实现点击“.columnh1”展开子菜单，再点击“.columnh1”隐藏子菜单的效果，为什么预览整个column都会消失呢？以下是代码：<!DOCTYPEhtmlP... 我想实现点击“.column h1”展开子菜单，再点击“.column h1”隐藏子菜单的效果，为什么预览整个column都会消失呢？

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.9.0.js"></script>
<script>
$(function(){
$(".column h1").toggle(function(){
$(".column dl").show(2000);
},function(){
$(".column dl").hide(2000);
})
})
</script>
<style>
.EE{width:500px;}
.column h1{background-color:blue;width:300px;height:px;font-family:"黑体";font-size:16px;color:#FF0;}
.column dl{background-color:#F00;width:300px;height:200px;font-family:"黑体"; font-size:16px;color:#FF0;display:none;}
.column dd{background-color:#0F0;width:100px;height:30px;font-family:"黑体"; font-size:16px;color:#FF0;}
</style>

</head>

<body>
<div class="EE">
<div class="column">
<h1>菜单标题</h1>
<dl>
<dd>菜单项</dd>
<dd>菜单项</dd>
<dd>菜单项</dd>
<dd>菜单项</dd>
<dd>菜单项</dd>
</dl>
</div>
</div>
</body>
</html> 展开

 我来答

1个回答

#热议# 上班途中天气原因受伤算工伤吗？

蓝叶资源分享
2016-02-24 · 分享互联网精品好资源。

蓝叶资源分享

采纳数：555 获赞数：924

向TA提问私信TA

关注

展开全部

代码写错了，按照下方的写法：
<script>
$(function(){
$('.column').click((function(){
$(this).find('dl').toggle();
})
})
</script>

追问

嗯，你这个也可以。我的代码是看完网上的教程才写出来的，但最终却没有达到教程那样预览效果，不知道问题出在哪个环节？你能帮我看一下是哪里写错吗？谢谢

追答

意思是这样的，点击.column 这个样式 只会显示当前样式DIV包含下面的dl

如果想要点击后，隐藏其它，显示当前下面的dl
你可以试试鼠标进过，就不要用toggle这个jq属性，也或者写成这样。

$(function(){
$('.column').click((function(){
$('.column dl').hide();
$(this).find('dl').show();
})
})

点击 先隐藏所有 然后显示当前下面的dl

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

想实现点击“.column h1”展开子菜单，再点击便隐藏子菜单的效果，为什么预览时整个column都会消失呢？ 50

其他类似问题

为你推荐：