展开与收缩效果

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这个效果只能实现一次再点击的时候就不能实现了  还有就是 a标签要点击两下 div才显示
可以的啊。
<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
   var current;
        $("a").click(function() {
            current = $(this).next().attr("id");
            $(this).next()[0].style.display == "none" ? $(this).next().show() : $(this).next().hide();
            $(".div_c[id!="+current +"]").each(function() {
                 $(this).hide();
            });

        });
});
</script>
<style type="text/css">
*{
    margin:0;
    padding:0;
    }
body{
    font-size:12px;
    background:#B4B4B4;
    }
li{
    list-style:none;
    }
.div
{
float:left;
width:200px;

}
.div li{
    float:left;
    width:200px;
    margin:10px;
    }
.div li a{
    width:200px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#FFF;
    display:inline-block;
    color:#333;
    }
.div li a.active{
    background:#00BCF3;
    color:#FFF;
    }
.div li a.active_1{
    background:#CCC;
    }
.div_c{
    width:200px;

    border:1px solid #00BCF3;
    background:#CCC;
    float:left;
    display:none;
    }
</style>
</head>
<body>
<div id="div" class="div">
  <ul>
   <li>
   <a id="btn1" href="javascript:;">1111111</a>
   <div id="div_c1" class="div_c" style="display:none;">
    <div style="padding:20px 0;">
    规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫岛枫
    </div>

   </div>
   </li>
  <li>
   <a id="btn2" href="javascript:;">1111111</a>
   <div id="div_c2" class="div_c" style="display:none;">
    <div style="padding:20px 0;">
    规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫岛枫
    </div>

   </div>
   </li>
   <li>
   <a id="btn3" href="javascript:;">1111111</a>
   <div id="div_c3" class="div_c" style="display:none;">
    <div style="padding:20px 0;">
    规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫岛枫
    </div>

   </div>
   </li>
  </ul>
</div>
</body>
</html>
用原生js实现了一下，也不难。原理就是显示这个之前，先把其它的隐藏了。类似于一种逆向思维的感觉。<!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>dome</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{font-size:12px;background:#B4B4B4;}
        li{list-style:none;}
        .div{float:left;width:200px;}
        .div li{float:left;width:200px;margin:10px;}
        .div li a{width:200px;height:30px;line-height:30px;text-align:center;background:#FFF;display:inline-block;color:#333;}
        .div li a.active{background:#00BCF3;color:#FFF;}
        .div li a.active_1{background:#CCC;}
        .div_c{width:200px;border:1px solid #00BCF3;background:#CCC;float:left;display:none;}
    </style><body>
<div id="div" class="div">
    <ul>
        <li>
            <a class="link" id="btn1" href="javascript:;">1111111</a>
            <div id="div_c1" class="div_c" style="display:none;">
                <div style="padding:20px 0;">
                    规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫岛枫
                </div>            </div>
        </li>
        <li>
            <a class="link" id="btn2" href="javascript:;">1111111</a>
            <div id="div_c2" class="div_c" style="display:none;">
                <div style="padding:20px 0;">
                    规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫岛枫
                </div>
            </div>
        </li>
        <li>
            <a class="link" id="btn3" href="javascript:;">1111111</a>
            <div id="div_c3" class="div_c" style="display:none;">
                <div style="padding:20px 0;">
                    规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫规范是梵蒂冈松岛枫哥史蒂芬给收腹带噶松岛枫岛枫
                </div>
            </div>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    function getByClass(oParent, cls){
        if(document.getElementsByClassName){
            return (oParent || document).getElementsByClassName(cls);
        } else {
            oParent = oParent || document;
            var res = [],
                child = null,
                reg   = new RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
            for(var i = 0, len = oParent.all.length; i < len; i ++){
                child = oParent.all[i];
                if(reg.test(child.className)){
                    res.push(child);
                }
            }
            return res;
        }
    }    var div = document.getElementById('div'),
        link = getByClass(div, 'link'),
        sub = getByClass(div, 'div_c');    for(var i=0; i < link.length; i++){
        link[i].index = i;
        link[i].onclick = function(){
            for(var j=0; j<link.length; j++){
                sub[j].style.display = 'none';
            }
            sub[this.index].style.display = 'block';
            this.style.display = 'block';
        }
    }</script>
</html>
请问下我还想再次点击a时还能吧当前的div隐藏掉
因为你这边是获取id的值好像id只能作用一次的  我这里就谷歌浏览器不行
$('a[id^="btn"]').click(function(){
         $('div[id^="div_c"]').hide();
         $(this).next().show();
})
我刚学JQ不久,写了一个.
用JS也好实现.
$(function(){
$('#div li').click(function(){
$('.div_c').not($(this).children('.div_c')).hide();
$(this).children('.div_c').toggle();
})
}
用原生JS写了一个上面那个在谷歌不好使.
把a 的class都设为btn了.
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div');
var aBtn=getClass(oDiv,'btn');
var aDiv=getClass(oDiv,'div_c');for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
if(aDiv[this.index].style.display=='block'){
aDiv[this.index].style.display='none';
}else{
for(var i=0;i<aBtn.length;i++){
aDiv[i].style.display='none';
}
aDiv[this.index].style.display='block';
}
}
}function getClass(oParent,aClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==aClass){
aResult.push(aEle[i]);
}
}
return aResult;
}}
我不知道什么原因?
上面的JS在谷歌也不行.
后来问题是解决了. 把CSS里的那个 a 的inline-block改为 block 就都OK了.不知道什么原理
确实CSS里的那个 a 的inline-block改为 block 就都OK了.  block 此元素将显示为块级元素，此元素前后会带有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
两个区别
这里的帖子都是讨论JQ的多啊，
哎。这个库其实写得也没那么神
交流框架设计，javascript程序设计的主题咋就没有呢