有没有办法通过单击另一个来切换CSS元素的高度？

时间：2019-06-17 02:42:06

标签： html css

我正在制作一个网站，以流媒体娱乐为目的。 当我开始尝试进行响应式设计以在手机，平板电脑等上获得良好的网站时，我遇到了通过单击另一个来切换css元素高度的难题。

要重现该错误，您将需要在宽度小于或等于768的窗口上获取代码！ 我使用过引导程序（或至少尝试过）。 我对jquery和javascrpit不太了解。 我已经尝试过此“ onclick函数”：onclick="document.getElementById('navbar-collapse').style.height='45rem';" 顺便说一句，如果我的代码中有一些一般性错误可以引起注意， 感谢您通知我

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Fancy navbar login / sign in form - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">

body{
    background-color:#1d1d1d;
    padding:50px;
}

#login-dp{
    min-width: 250px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
    font-size:12px    
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0    
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
.btn-fb{
    color: #fff;
    background-color:#3b5998;
}
.btn-fb:hover{
    color: #fff;
    background-color:#496ebc 
}
.btn-tw{
    color: #fff;
    background-color:#55acee;
}
.btn-tw:hover{
    color: #fff;
    background-color:#59b5fa;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
    .left {
        position: absolute;
        margin-top: 20%;
    }
    .navbar-nav.navbar-center {
        position: absolute;
        margin-bottom: 60%;
    }
    .navbar-nav.navbar-right {
        position: absolute;
        margin-top: 50%;
    }
    .navbar-collapse{
        min-height: 25rem;
    }
    .navbar{
        background-color: #171717;
        margin-right: 3rem;
    }
    .navbar-brand{
        width: 5rem;
    }
    .navbar-text{
        margin-top: 35px;
        margin-bottom: 0rem;
    }

}
.navbar-toggle{
    margin-top: 1.2rem;
}
.navbar-brand{
    margin-bottom: 1rem;
}
.collapse{
    margin-top: 0.5rem;
}
.navbar-inverse .navbar-nav>li>a{
    font-family: Ubuntu, "helvetica neue", Helvetica, Arial, sans-serif;
    color: white;
    font-size: 17px;
    font-weight: 400;
}
.navbar-inverse .navbar-text{
    font-family: Ubuntu, "helvetica neue", Helvetica, Arial, sans-serif;
    color: white;
    font-size: 17px;
    font-weight: 400;
}
.navbar-inverse .navbar-nav>li>a>p{
    font-family: Ubuntu, "helvetica neue", Helvetica, Arial, sans-serif;
    color: green;
    font-size: 17px;
    font-weight: 400;   
}
.navbar-inverse .navbar-nav>li>a>p span{
    font-family: Ubuntu, "helvetica neue", Helvetica, Arial, sans-serif;
    color: white;
    font-size: 16px;
}
.navbar-nav>li>a{
    padding-bottom: 0px;
}
@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: static;
    left: 50%;
    transform: translatex(50%);
    width: 60rem;
  }
  .navbar{
    min-height: 6rem;
    background-color: #171717;
  }
  .navbar-text{
    margin-top: 13px;
  }
}

    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<body>

<nav class="navbar navbar-default navbar-inverse" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand"><img src="logo.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <div class="left">
      <ul class="nav navbar-nav">
        <li><a href="#"><b>Filmes</b></a></li>
        <li><a href="#"><b>Séries</b></a></li>
        <li><a href="#"><b>FAQ</b></a></li>
      </ul>
    </div>
      <ul class="nav navbar-nav navbar-center">
        <li><a href="#"><p>Endereço Desbloqueado: <span>youtube.com</span></p></a></li>
    </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a class="navbar-text">Já tem uma conta?</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="document.getElementById('navbar-collapse').style.height='45rem';"><b>Login</b> <span class="caret"></span></a>
            <ul id="login-dp" class="dropdown-menu">
                <li>
                     <div class="row">
                            <div class="col-md-12">
                                Login via
                                <div class="social-buttons">
                                    <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
                                    <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
                                </div>
                                or
                                 <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                        <div class="form-group">
                                             <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                             <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
                                        </div>
                                        <div class="form-group">
                                             <label class="sr-only" for="exampleInputPassword2">Password</label>
                                             <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                                             <div class="help-block text-right"><a href="">Forget the password ?</a></div>
                                        </div>
                                        <div class="form-group">
                                             <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                        </div>
                                        <div class="checkbox">
                                             <label>
                                             <input type="checkbox"> keep me logged-in
                                             </label>
                                        </div>
                                 </form>
                            </div>
                            <div class="bottom text-center">
                                New here ? <a href="#"><b>Join Us</b></a>
                            </div>
                     </div>
                </li>
            </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


</body>
<script type="text/javascript">

</script>
</body>
</html>

我希望通过单击“登录”按钮来切换导航栏的高度。但是当我单击时什么也没有发生。

1 个答案:

答案 0 :(得分：0)

.left {
  position: relative;
}
.navbar-nav.navbar-center {
  position: relative;
}
.navbar-nav.navbar-right {
  position: relative;
}

可以通过将position中元素的navbar-collapse设置为relative而不使用absolute来解决您的问题。现在，高度将根据内容自动设置。

现在您可以删除该onclick，因为您不需要使用静态值来增加高度，并且错误是因为id='navbar-collapse'中没有元素。

相关问题
最新问题