jQuery隐藏和显示问题，如图，我只要显示一个DIV，别的DIV都必须隐藏，求代码，感谢！！
点客服，客服下的DIV显示然后我不关闭客服下的DIV，直接点人力，这时客服下的DIV自动隐藏，而显示人力下的DIV，依此类推，就是说只要显示一个DIV，别的DIV都必须隐...
点客服，客服下的DIV显示
然后我不关闭客服下的DIV，直接点人力，这时客服下的DIV自动隐藏，而显示人力下的DIV，依此类推，就是说只要显示一个DIV，别的DIV都必须隐藏，求代码，感谢！！ 展开
然后我不关闭客服下的DIV，直接点人力，这时客服下的DIV自动隐藏，而显示人力下的DIV，依此类推，就是说只要显示一个DIV，别的DIV都必须隐藏，求代码，感谢！！ 展开
4个回答
展开全部
下拉列表的四个div绑定相同的class和不同的id，点击事件时绑定class实现所有div关闭，然后通过绑定唯一的id输出该下拉菜单,刚刚在本机写了一下代码，用上述方法实现的，个人感觉还有其他更方便的方法可以实现，先上代码
html：
<!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=gb2312" />
<title>abc</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div style="width: 200px;height: 30px;border: 1px solid #cccccc;line-height: 30px; text-align: center;" id="sale">销售</div>
<div style="width: 200px;height: 100px;border: 1px solid #FF0000; margin-top: 5px; display: none;" class="sub" id="sub_sale" ></div>
<div style="width: 200px;height: 30px;border: 1px solid #cccccc; margin-top: 20px;line-height: 30px; text-align: center;" id="serve">客服</div>
<div style="width: 200px;height: 100px;border: 1px solid #FF0000; margin-top: 5px; display: none;" class="sub" id="sub_serve"></div>
<div style="width: 200px;height: 30px;border: 1px solid #cccccc; margin-top: 20px;line-height: 30px; text-align: center;" id="hr">人力</div>
<div style="width: 200px;height: 100px;border: 1px solid #FF0000; margin-top: 5px; display: none;" class="sub" id="sub_hr"></div>
<div style="width: 200px;height: 30px;border: 1px solid #cccccc; margin-top: 20px;line-height: 30px; text-align: center;" id="gov">行政</div>
<div style="width: 200px;height: 100px;border: 1px solid #FF0000; margin-top: 5px; display: none;" class="sub" id="sub_gov"></div>
</body>
</html>
jquery：
$(document).ready
(
function()
{
$('#sale').click
(
function()
{
$(".sub").hide();
$("#sub_sale").slideDown('slow');
}
);
$('#serve').click
(
function()
{
$(".sub").hide();
$("#sub_serve").slideDown('slow');
}
);
$('#hr').click
(
function()
{
$(".sub").hide();
$("#sub_hr").slideDown('slow');
}
);
$('#gov').click
(
function()
{
$(".sub").hide();
$("#sub_gov").slideDown('slow');
}
);
}
);
记得要添加jquery文件，css直接写在html中，显得有些凌乱，见谅，看清楚id和class名就行了，回头继续优化和改善方法，有进展继续讨论，相互学习了！
追问
谢谢，我已经解决了，顺便问一下，怎么样导用jquery文件，我都写在HTML里了，好乱
追答
，src参数后是你jquery文件的地址
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
都用同一个class，点击时先遍历这个class的元素全部隐藏，然后显示点击的元素
追问
用同一个class,问题是我一点所有的DIV都同时显示和隐藏了
追答
在点击事件里写：
$('.classname').hide();
$(this).children('.classname').show();
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以这样做
$(".class").each(function(index){
if(index==$(this).index()){ //这是判断你是不是当前点击的元素
//显示当前
$(this).show();
}else{
$(".class:neq("+neq+")").hide(); //隐藏其它的，这个地方我没测试过，反正意思就是隐藏所有索引不等于当前点击的值的元素，如果我的写法有误，你自己查一下帮助手册，按我这思路应该没什么问题的，很容易解决
}
})
$(".class").each(function(index){
if(index==$(this).index()){ //这是判断你是不是当前点击的元素
//显示当前
$(this).show();
}else{
$(".class:neq("+neq+")").hide(); //隐藏其它的，这个地方我没测试过，反正意思就是隐藏所有索引不等于当前点击的值的元素，如果我的写法有误，你自己查一下帮助手册，按我这思路应该没什么问题的，很容易解决
}
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这是jQuery手风琴特效，实例：http://www.jsfoot.com/jquery/accordion/
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
