JQuery写的关闭折叠代码

Question

本帖最后由 hong8726 于 2010-11-25 17:42:34 编辑

Answer 1

写个共用的类名 放到你想要的地方不就得了 楼主还纠结什么呢？PS：
用$(this)估计好看些

Answer 2

是这样的，<li><a href="#" id="click02">新闻文章管理</a></li>控制的是<dt class="side-mainnav click02"><a href="javascript:;">新闻文章管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">顾客查询</a></li>
                <li><a href="javascript:;">顾客统计</a></li>
            </ul>
        </dd>
如果用一个class的话不知道怎么判断操作的是哪个dt...= =。感觉我表达不清楚

Answer 3

代码上注释有问题，不是给dt加，dt的话，我已经实现了通过给dt添加click事件，$(this).next("dd").实现折叠效果。现在主要想是通过dt外的<li>来控制

Answer 4

$(".clicks").click(function(){                   //向DT添加一个click事件
        if($(this).next("dd").css('display') == 'none'){ //这里的$(this)就是你点击的那个。你可以安心的使用class了，后面的代码请自己补全
            $(".side dt").next("dd").animate({
                            height:'hide',opacity:'hide'
                        }, "slow" );
            $(".click02").next("dd").animate({
                            height:'show',opacity:'show'
                        }, "slow" );
        }else{
            
            $(".click02").next("dd").animate({
                            height:'hide',opacity:'hide'
                        }, "slow" );
        }
    });

Answer 5

抱歉，我在注释上写错了，注释那个其实是dt的，$(".clicks").click(function(){                   
        if($(this).next("dd").css('display') == 'none'){ 这样做的确是实现效果的,但class="clicks"应该指的是dt吧，
如果给dt加class="clicks"是可以实现的，
给<li>加也行？ = =。因为在家，东西在公司。没办法尝试。不过想想好像想不通<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>这样排列的话，dt下面的dd,每个对应都很清楚。
但如果是
<li></li>
<li></li>
<li></li>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
我通过点击<li>,如何知道是哪个dd
我没表达清楚可能，现在的代码结构是
<ul>
          <li><a href="#" class="clicks">网站常规管理</a></li>
          <li><a href="#" class="clicks">新闻文章管理</a></li>
          <li><a href="#" class="clicks">栏目内容管理</a></li>
          <li><a href="#" class="clicks">注册用户管理</a></li>
          <li><a href="#" class="clicks">其他参数管理</a></li>
</ul>
<div class="side">
      <dl class="side-dl">
        <dt class="side-top"><a href="javascript:;">网站常规管理</a></dt>
        <dd>
            <ul>
                <li><a href="javascript:;">商品发布</a></li>
                <li><a href="javascript:;">商品查询</a></li>
                <li><a href="javascript:;">商品分类</a></li>
                <li><a href="javascript:;">品牌维护</a></li>
                <li><a href="javascript:;">商品评论</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav click02"><a href="javascript:;">新闻文章管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">顾客查询</a></li>
                <li><a href="javascript:;">顾客统计</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav itemID03"><a href="javascript:;">栏目内容管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">订单查询</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav"><a href="javascript:;">注册用户管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">商品排行</a></li>
                <li><a href="javascript:;">销售报表</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav"><a href="javascript:;">其他参数管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">资讯发布</a></li>
            </ul>
        </dd>
    </dl>
        <div class="side-footer"></div>
    <!--side End-->
    </div>

Answer 6

jQuery可以轻松的计算出你的li在兄弟当中处于第几个 那你就找第几个dt的就可以了阿 呵呵

Answer 7

断网了
<META NAME="Author" CONTENT="theforever(碧海情天),赵亮">
<meta http-equiv="email" content="theforever·１６３。com">
<meta http-equiv="blog" content="blog.csdn.net/theforever">
<script src="jquery.min.js"></script>
<style>
.display {display:none;}
</style>
<div class="nav">
        <ul>
          <li><a href="#" class="theforever"><img src="images/Boolean_026.png"  />网站常规管理</a></li>
          <li><a href="#" class="theforever"><img src="images/Boolean_067.png"  />新闻文章管理</a></li>
          <li><a href="#" class="theforever"><img src="images/Boolean_052.png"  />栏目内容管理</a></li>
          <li><a href="#" class="theforever"><img src="images/Boolean_021.png"  />注册用户管理</a></li>
          <li><a href="#" class="theforever"><img src="images/Boolean_031.png"  />其他参数管理</a></li>
        </ul>
<!--nav End-->
</div>
 <div class="side">
      <dl class="side-dl">
        <dt class="side-top"><a href="javascript:;">网站常规管理</a></dt>
        <dd>
            <ul>
                <li><a href="javascript:;">商品发布</a></li>
                <li><a href="javascript:;">商品查询</a></li>
                <li><a href="javascript:;">商品分类</a></li>
                <li><a href="javascript:;">品牌维护</a></li>
                <li><a href="javascript:;">商品评论</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav"><a href="javascript:;">新闻文章管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">顾客查询</a></li>
                <li><a href="javascript:;">顾客统计</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav"><a href="javascript:;">栏目内容管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">订单查询</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav"><a href="javascript:;">注册用户管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">商品排行</a></li>
                <li><a href="javascript:;">销售报表</a></li>
            </ul>
        </dd>
        <dt class="side-mainnav"><a href="javascript:;">其他参数管理</a></dt>
        <dd class="display">
            <ul>
                <li><a href="javascript:;">资讯发布</a></li>
            </ul>
        </dd>
    </dl>
        <div class="side-footer"></div>
    <!--side End-->
    </div><script type="text/javascript">
$(".theforever").click(function() { //向DT添加一个click事件
if ($("dd:eq("+$(".theforever").index(this)+")").css('display') == 'none') {
$(".side dt").next("dd").animate({
height: 'hide',
opacity: 'hide'
},
"slow");
$("dd:eq("+$(".theforever").index(this)+")").animate({
height: 'show',
opacity: 'show'
},
"slow");
} else {
$("dd:eq("+$(".theforever").index(this)+")").animate({
height: 'hide',
opacity: 'hide'
},
"slow");
}
});
</script>