如何在点击时滑出div答案

【问题标题】：How to slide out div on click如何在点击时滑出div
【发布时间】：2014-02-11 09:24:35
【问题描述】：

我有两个相邻的 div。已使用 absolute 位置将其相邻放置。问题是我只想在使用 jQuery 单击第一个链接中的链接后才显示第二个 div。

html

<body>

  <div class="container">
            </div>


    <div class="wrapper">
        <div class="login-wrapper">
            <div class="accounts-wrapper">
              <ul class="user-account">
                <li>
                  <a href="www.abc.com">
                        <span class="account-name">Zafar Khan</span>
                      </a>
                    </li>
                    <li>
                      <a href="www.abc.com">
                        <span class="account-name">Zafar Khan</span>
                      </a>
                    </li>

                  </ul>
            </div>          
         </div>  
        </div>
    </div>
  <div class="login-form-holder">
            <div class="user-account form-block">
                <img src="images/img_avatar.jpg"/>
                <div class="account-holder">John Deo</div>

            </div>

         </div>
         </div>

  </div>


</body>

css

/*Login screen*/
.wrapper{
    position:absolute;
     z-index:15;
     top:40%;
     left:30%;
     margin:-100px 0 0 -150px;
    }

 .login-wrapper {
    width:200px;
    margin:auto 0;
    padding:auto 0;
    }
.login-header {
    color:#FFFFFF;
    font-size:1.5em;
    padding:1em;
    background:#2380DE;
    height:25px;
}

.user-account{
    list-style:none;
    background:#FFFFFF;
    -webkit-box-shadow: 2px 2px 8px 0px rgba(227,227,231,1);
    -moz-box-shadow: 2px 2px 8px 0px rgba(227,227,231,1);
    box-shadow: 2px 2px 8px 0px rgba(227,227,231,1);
}

.user-account li {
    background: url("../images/arrow-right.png") no-repeat scroll 95% 50% transparent;
    list-style-type: none;
    padding: 1em 1em;
    vertical-align: middle;
    border-bottom:1px #EFEFEF solid;
    display:block;
    position:relative;
    cursor:pointer;
}

.user-account li:hover {
 background:#EFEFEF;
}
.user-account li > a img {
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
     vertical-align: middle;
     margin-right:1em;

}
.user-account li > a span.account-name {
    vertical-align: middle;
    color: #427FED;
}

.grey-background{
  background:#F6F7FB;
}

.toprightlinks{
  margin-right: 1em;
  display:block;
}

.linkblock li{
  display:inline;
  margin-right:.6em;

}

.linkblock li > a{
  padding:.6em .6em .4em .4em;
  color:#FFFFFF;
  -webkit-border-radius: 5px;
  border-color: solid 10px rgba(0,0,0,0.2)
  text-align:center;
}

.linkblock li > a.remove{
  background:#F15246;
}

.linkblock li > a.add{
  background:#91DE36;

}
/*Login form*/
.login-form-holder{
    position:absolute;
     z-index:15;
     top:40%;
     left:60%;
     margin:-100px 0 0 -150px;

}

.form-block{
    text-align:center;
    padding-bottom:.5em;
    margin-bottom:1em;
    }

.login-form-header {
    color:#2d87e3;
    font-size:1.5em;
    padding:1em;
    background:#efefef;
    height:25px;
}
.login-form-holder img{
    width:100px;
    height:100px;
    -webkit-border-radius: 50%;
    padding:1em 1em;
}
.account-holder{
    color:#2482e2;
    font-weight:900;
    font-size:20px;
    padding-bottom: 1em;
}

【问题讨论】：

该链接指向 jsfiddle 主页。
我已经用 jsfiddle 链接编辑了你的帖子
@jyoti 你能详细说明你想要实现的目标吗？哪个 div 是“第二个”div？
点击名称时，相邻的 div 即带有图像的名称必须滑出。更像是，带有链接的 div 应该在中心，当点击链接时，带有名称和图像的相邻 div 应该推动链接 div 并在侧面滑动
一百万个其他问题的重复。请在询问之前进行研究。

标签： jquery html css

【解决方案1】：

$("link to click on").click(function(){
    $(".login-form-holder").show("slow")
});

如果您遇到任何问题，请告诉我

【讨论】：

【解决方案2】：

不完全确定您要单击什么以及要隐藏/显示什么，但这应该可以。

在 HTML 中，将这些类添加到要单击的元素和要显示的 div 中：

class="thing-to-click"
class="thing-to-show hidden-thing"

然后将其添加到您的 CSS：

.thing-to-hide.hidden-thing{
  display:none;
}

然后使用这个 jQuery：

$('.thing-to-click').click(function(){
  $('.thing-to-hide').toggleClass('hidden-thing');
});

现在您可以使用 CSS 来控制隐藏/显示 div 的方式：display:none; 只是最简单的方法。

使用你的代码，我做了这个例子： codepen.io/pen 为此，我假设您要单击的元素是第一个 Zafar Khan 链接，而您要隐藏/显示的内容是 login-form-holder div。

如果您不希望更改是可逆的，请将 toggleClass 交换为 removeClass。

【讨论】：

为什么使用toggleClass()？为什么不只是toggle()？
我更喜欢在 CSS 中保留所有动画和样式。如果我对 jQuery 所做的只是添加和删除类，那感觉就像交互和样式很好地分开了。