Question

我有两个相邻的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;
}

Answer 1

不完全确定要点击的内容以及要隐藏/显示的内容，但这应该有效。

在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。

Answer 2

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

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

如何在点击时滑出div

2 个答案: