代码之家 › 专栏 › 技术社区 › Jason Mayo

我怎样才能打开一个div关闭所有其他div?

slide html jquery

Jason Mayo · 技术社区 · 14 年前

我目前有2个面板(div的)在我的网站顶部。当你点击一个链接时,它会从面板上掉下来。当你点击另一个链接时,我希望它向上滑动任何打开的div,然后一旦它向上滑动,打开被点击的div。

$(document).ready(function(){
$(".btnSlideL").click(function(){
    $("#clientLogin").slideUp('fast');
  $("#languages").slideToggle("fast");
  $(this).toggleClass("active");
});
});

$(document).ready(function(){
$(".btnSlideC").click(function(){
  $("#languages").slideUp('fast');
  $("#clientLogin").slideToggle("fast");
  $(this).toggleClass("active");
});

和HTML:

<div id="languages" class="topPanel">
    <div class="topPanelCont">
        languages
    </div>
</div>

<div id="clientLogin" class="topPanel">
    <div class="topPanelCont">
        client login
    </div>
</div>

<div id="container">
    <div id="containerCont">
        <div id="headerTop">
            <a href="#" title="#" class="btnSlideL">Languages</a>
            <a href="#" title="#" class="btnSlideC">Client Login</a>
        </div>

但我觉得有点冗长。

我想实现的一个很好的例子是 here :

单击顶部的链接。

2 回复 | 直到 13 年前

Victor Nicollet 14 年前

您希望在结束动画之后开始动画。这可以通过提供对第一个动画的回调来实现:

$("#clientLogin").slideUp('fast', function() { 
  $("#languages").slideToggle("fast"); 
});

dockeryZ Yacoby 14 年前

换句话说,将两个类命名为同一个类(唯一的区别是一个字母)会破坏类的目的。你给他们一个id,让他们独一无二。

    <div id="headerTop">
        <a href="#" title="#" class="btnSlideL">Languages</a>
        <a href="#" title="#" class="btnSlideC">Client Login</a>
    </div>

就像这样。。。

    <div id="headerTop">
        <a href="#" title="#" id="L" class="btnSlide">Languages</a>
        <a href="#" title="#" id="C" class="btnSlide">Client Login</a>
    </div>

现在您不必有两个相同的jquery函数,只要

$(document).ready(function(){
$(".btnSlide").click(function(){
  $(".topPanel").slideUp('fast');
  $(this).toggleClass("active");
});
$("#L").click(function() {
  $('#languages').slideDown("fast");
});
$("#").click(function() {
  $('#clientlogin').slideDown("fast");
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前