元素不会消失并重新出现，直到第一次手动完成

时间：2016-04-19 21:30:46

标签： jquery html css show-hide

当我点击登录按钮时，应该发生登录表单的容器应该隐藏，并且应该出现侧边栏，搜索栏，图块和注销按钮。我有时会遇到这样的情况：如果我必须单击两次登录按钮才能做出反应，或者当我点击它时，所有其他元素都会显示为应该短暂的时间，然后重新加载页面或者再次隐藏这些元素并且取消隐藏登录容器foo。 出于调试目的，我插入了 <a href="#" onclick="toggle_visibility('foo');">toggle container on.</a> 手动隐藏和取消隐藏容器foo中的日志。直到此之后，登录按钮才会根据需要适当地执行。我觉得我需要初始化toggle continer on.正在为我做的一些价值，但我现在感到难过。我在下面的代码中评论了哪些元素对应于哪些代码段。我试过google chrome和mozilla firefox。我非常感谢任何见解或帮助。我在网上找到了一些资料说明用style="display:none"初始化元素，但它没有帮助。

这是我的html w / jquery：

<!DOCTYPE html>
<html>
<head>
    <title>Welcome To Floor 3!</title>

    <link rel="SHORTCUT ICON" href="number1.ico">
    <link href="animate.css" rel="stylesheet"/>
    <link rel ="stylesheet" type="text/css" href="login.css"></link>

    <!--for sidebar-->
    <title>SideBar Menu</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <!--for search bar and logout button-->
    <div id="wsf" style="display:none">
        <form class="wrapsearchform">
            <input type="search" placeholder="Search..." class="searchbar" required>
            <input type="button" value="Search" class="button">
            <input type="button" value="Logout" class="button">
        </form>
    </div>

    <!--
    <div id="logoutbutton">
        <input type="button" value="Logout" class="button">
    </div>-->

    <!--for tiles-->
    <div id="tiles" style="display:none">
        <ul class="wrapper">
        <li class="box">Search Employee</li>
        <li class="box">Floor Map</li>
        <li class="box">Search by Department</li>
        <li class="box">Search by Job Title</li>
        <li class="box">3</li>
        <li class="box">2</li>
        <li class="box">3</li>
    </div>
    <!--for sidebar menu-->
    <div id="sidebar" style="display:none" class="sidebarfront">

        <ul>
            <li><a href="">Employee Directory!</a></li>
            <li><a href="">Floor Map!</a></li>
            <li><a href="">Search!</a></li>

        </ul>

        <div id="sidebar-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>

    $(document).ready(function(){
        $('#sidebar-btn').click(function(){
            $('#sidebar').toggleClass('visible');
        });
    });

    </script>

    <!--for log in box-->

    <div id="foo" style="display:block" class="container animated bounceInDown">

        <img src ="number1.png">

        <!--<form action="insert server info here"> this submits form fields
        onerror="" to prompt user wrong input has been given.
        onopen="" container is hidden to reveal homepage
        -->
        <form>
            <div class="form-input">
                <input type="text" name="username" placeholder="Enter Username">

            </div>
            <div class="form-input">
                <input type="password" name="password" placeholder="Enter Password">
            </div>
            <input type="submit" name="submit" value="Login" class="btn-login" onclick="toggle_visibility('foo'); toggle_visibility('sidebar'); toggle_visibility('tiles'); toggle_visibility('wsf');"/>

        </form>
    </div>

    <a href="#" onclick="toggle_visibility('foo');">toggle container on.</a>
    <script type="text/javascript">

        function toggle_visibility(id) {
            var toggle = document.getElementById(id);
            toggle.style.display = toggle.style.display == "block" ? "none" : "block";
           //var e = document.getElementById(id);
           //if(e.style.display == 'block')
           //   e.style.display = 'none';
           //else
           //   e.style.display = 'block';
        }

    </script>



    <!--
    <div class="containsWelcome">

    </div>
    -->
</body>
</html>

这是我的css（单独文件）：

body{
    margin: 0.auto;
    padding:0px;
    background-image: url("number1building.jpg");
    background-repeat: no-repeat;
    background-size: 100% 1080px;
    font-family:"Helvetica Neue", Helvetica, Arial;
}

.wrapsearchform{
    text-align: center;
    padding-top: 10px;
}

.searchbar{
    padding:8px 15px;
    border:0px solid white;
    border-radius: 5px;
}
.button{
    position:relative;
    padding:6px 15px;
    left:-8px;
    border-radius: 5px;
    border:2px solid #207cca;
    background-color:#207cca;
    color:#fafafa;
}
.button:hover{
    background-color:#fafafa;
    color:#207cca;
}

#sidebar{
    background:#151718;
    width:200px;
    height:100%;
    display:block;
    position:absolute;
    left:-200px;
    top:0px;
    transition:left 0.3s linear;
    z-index: 100;
}

#sidebar.visible{
    left:0px;
    transition:left 0.3s linear;
}
/*
.containsWelcomeToNumber1{ 
    font-family: Arial; 
    font-style: italic;
    color: white;
    text-align: center;
    font-size: 500%
}
*/

.wrapper {
    /*max-width: 1080px;*/
    padding-top: 10px;
    width: auto;
    height: auto;
}

.box {
    display: inline-block;
    position: relative;
    width: 49%;
    height: 200px;
    background: rgba(1, 1, 1, 0.1);
    border-radius: 5px;
    text-align: center;
    z-index: 0;
    margin: 5px 5px 5px -5px;
    transition: all .15s ease-in-out;
}

.box:hover {
    background: #9CC;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.2);
}

ul{
    margin:0px;
    padding:0px;
}

ul li{
    list-style:none;
}

ul li a{
    background:#1C1E1F;
    color:#ccc;
    border-bottom:1px solid #111;
    display:block;
    width:180px;
    padding:10px;
    text-decoration: none;
}

#sidebar-btn{
    display:inline-block;
    vertical-align: middle;
    width:20px;
    height:15px;
    cursor:pointer;
    margin:20px;
    position:absolute;
    top:0px;
    right:-60px;
    z-index: 100;
}

#sidebar-btn span{
    height:1px;
    background:#111;
    margin-bottom:5px;
    display:block;
    z-index: 100;
}

#sidebar-btn span:nth-child(2){
    width:75%;
    z-index: 100;
}

#sidebar-btn span:nth-child(3){
    width:50%;
    z-index: 100;
}

.sidebarfront{
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse; 
    position:relative;
    z-index: 100;
}

.container{
    vertical-align: middle;
    width: 400px;
    height: 230px;
    text-align: center;
    background-color: none;
    border-radius: 5px;
    border-color: #ffffff;
    border-style: solid;
    margin: 0 auto;
    margin-top: 300px;
}
.container img{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}
input[type="text"],input[type="password"]{
    height: 30px;
    width: 300px;
    border-radius: 5px;
    border: none;
    font-size: 20px;
    margin-bottom: 10px;
    background-color: #fff;
    padding-left: 30px;
}
.form-input::before{
    position: absolute;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px:
    font-size: 30px;
}
.btn-login{
    padding: 15px 30px;
    color: #fff;
    border-radius: 5px;
    border: none;
    background-color: #00659e;

}

0 个答案:

没有答案
相关问题
最新问题