如何用JS代码实现单击鼠标显示(或隐藏)子菜单的功能？如图点击音乐管理则显示/隐藏下面的音乐查询、添加
3个回答
展开全部
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
<div class="mail">
<p>主菜单1</p>
<ul class="test">
<li>子菜单1</li>
<li>子菜单1</li>
<li>子菜单1</li>
<li>子菜单1</li>
<li>子菜单1</li>
</ul>
<p>主菜单2</p>
<ul class="test">
<li>子菜单2</li>
<li>子菜单2</li>
<li>子菜单2</li>
<li>子菜单2</li>
<li>子菜单2</li>
</ul>
<p>主菜单3</p>
<ul class="test">
<li>子菜单3</li>
<li>子菜单3</li>
<li>子菜单3</li>
<li>子菜单3</li>
<li>子菜单3</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('p').toggle(function(){
$(this).next(".test").hide();
},function(){
$(this).next(".test").show();
})
});
</script>
</body>
</html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
<div class="mail">
<p>主菜单1</p>
<ul class="test">
<li>子菜单1</li>
<li>子菜单1</li>
<li>子菜单1</li>
<li>子菜单1</li>
<li>子菜单1</li>
</ul>
<p>主菜单2</p>
<ul class="test">
<li>子菜单2</li>
<li>子菜单2</li>
<li>子菜单2</li>
<li>子菜单2</li>
<li>子菜单2</li>
</ul>
<p>主菜单3</p>
<ul class="test">
<li>子菜单3</li>
<li>子菜单3</li>
<li>子菜单3</li>
<li>子菜单3</li>
<li>子菜单3</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('p').toggle(function(){
$(this).next(".test").hide();
},function(){
$(this).next(".test").show();
})
});
</script>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function set_tab(id,num){
for(i=1;i<=num;i++){
if(id==i){
document.getElementById("tab"+i).style.display="";
}else{
document.getElementById("tab"+i).style.display="none";
}
}
}音乐管理设个ID为tab1，再加上onclick=set_tab(1，2)事件
用户管理设个ID为tab2，再加上onclick=set_tab(2，2)事件
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用JQuery中的slideToggle()函数，作用是显示或影藏HTML文档中的对象，很简单，不需要判断，这个函数会自动判断，当目标对象是显示的话，他会影藏；当目标对象是影藏的话，他会显示。
用原生的javascript来写。
用JQuery中的show()和hide()函数；slideDown(),slideUp()函数；
个人建议用第一种方式，因为简单，你看看这篇文章：
追问
有没有可用的代码？初学没用过！想看代码来理解！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
