jquery - 我的下拉 div 不可见

Question

我想让这个 div 在点击名称时向下滑动，但是 div id 不可见请帮忙

html文件

<div class="header">
        <img id="logo" src="images/mystore.png" height="40px"><span>My Store</span>
        <input id="search_bar" value="search" type="text" ></input>
        <span id="name">Hello   Mr. <span class="admin_name"><?php echo "Mayur Sonawane";?></span></span>
        <div class="drop_down">
            <a href="logout.php"><form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                <input type="button" id="logout" name="logout" value="Logout"></form></a>
            <script type="text/javascript">
    var flag=0;
            $(document).ready(function() {
                $(".drop_down").slideUp();
                $("#name").click(function(event) {
                    if (flag==0) {
                    $(".drop_down").slideDown('slow/400/fast', function() {flag=1;});
                }else
                    {
                        $(".drop_down").slideUp();
                        flag=0;
                    }
                });

            });
    </script>
        </div>


</div>

CSS

body,html{
    margin: 0px;
    height: 100%;
    bottom: 0px;
    background-color: #D6D6D6;
    display: inline;

 }
div.header {
    background-color: grey;
    height: 60px;
    width: 100%;
    position: fixed;
    font-family: open-sans-semi;
    font-size: 23px;
    color: #0000FF;
    text-shadow:1px 2px #00004C;
}

#search_bar {
    display: inline;
    float: right;
    margin-right: 34%;
    margin-top: 13px;
    width: 350px;
    height: 20px;
    background: url(images/search-dark.png) no-repeat 10px 7px #444;
    background-size: 15px 60%;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    padding: 6px 10px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;

}
#logo {
    margin:10px 0px 0px 20%;
}
#name{
    float:right;
    margin-top: 0px;
    margin-right: 20px;
    color: white;
    font-size: 20px;
    font-family:open-sans-light,sans-serif;
    margin-top: -50px;
}
#name:hover{
    cursor: pointer;
}
.drop_down{
    display: block;
    float: right;
    margin-top: 20px;
    width:100px;
    height: 50px;
    margin-right: -190px;
    background-color: grey;
    box-shadow:0px 3px 2px 2px #001433;
    padding: 10px;
    border-radius: 50px 50px 10px 10px;
    border:#4C1A80 2px solid;
    position:relative;
    }
    #logout{
    width: 80px;
    margin-left: 10px;
    margin-right: auto;
    margin-top: 30px;
    background-color:#FFFF66;
    font-family: open-sans-semi;


}

Answer 1

将您的 jQuery/JavaScript 放在 HTML 页面的 head 部分。以下工作正常。

var flag=0;
$(document).ready(function() {
	$(".drop_down").slideUp();
	$("#name").click(function(event) {
		if (flag==0) {
		$(".drop_down").slideDown('slow/400/fast', function() {flag=1;});
	}else
		{
			$(".drop_down").slideUp();
			flag=0;
		}
	});

});

body,html{
    margin: 0px;
    height: 100%;
    bottom: 0px;
    background-color: #D6D6D6;
    display: inline;

 }
div.header {
    background-color: grey;
    height: 60px;
    width: 100%;
    position: fixed;
    font-family: open-sans-semi;
    font-size: 23px;
    color: #0000FF;
    text-shadow:1px 2px #00004C;
}

#search_bar {
    display: inline;
    float: right;
    margin-right: 34%;
    margin-top: 13px;
    width: 350px;
    height: 20px;
    background: url(images/search-dark.png) no-repeat 10px 7px #444;
    background-size: 15px 60%;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    padding: 6px 10px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;

}
#logo {
    margin:10px 0px 0px 20%;
}
#name{
    float:right;
    margin-top: 0px;
    margin-right: 20px;
    color: white;
    font-size: 20px;
    font-family:open-sans-light,sans-serif;
    margin-top: -50px;
}
#name:hover{
    cursor: pointer;
}
.drop_down{
    display: block;
    float: right;
    margin-top: 20px;
    width:100px;
    height: 50px;
    margin-right: -190px;
    background-color: grey;
    box-shadow:0px 3px 2px 2px #001433;
    padding: 10px;
    border-radius: 50px 50px 10px 10px;
    border:#4C1A80 2px solid;
    position:relative;
    }
    #logout{
    width: 80px;
    margin-left: 10px;
    margin-right: auto;
    margin-top: 30px;
    background-color:#FFFF66;
    font-family: open-sans-semi;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header">
        <img id="logo" src="images/mystore.png" height="40px"><span>My Store</span>
        <input id="search_bar" value="search" type="text" ></input>
        <span id="name">Hello   Mr. <span class="admin_name"><?php echo "Mayur Sonawane";?></span></span>
        <div class="drop_down">
            <a href="logout.php"><form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                <input type="button" id="logout" name="logout" value="Logout"></form></a>
        </div>
</div>