单击按钮可移动整个 HTML 正文

Question

我有一个非常基本的网页设置，其中包括一个通过单击按钮触发的下拉菜单。当我单击该按钮时，下拉菜单会自行显示，但也会移动该页面的全部内容。我不确定是什么原因造成的，如果有任何帮助，我将不胜感激。提前致谢！

这里是直播link：http://copy-writer-shipments-14524.bitballoon.com/

这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
    <title>ManaBadi</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <script src="./jquery_min.js"></script>
    <script src="./button_dropdown_menu.js"></script>
    <script src="./nav_hide_show.js"></script>
</head>
<body>
<div id="main_content_container">
    <header>
    <span>ManaBadi</span>
    <img src="./menu100.png" id="hamburger_menu_icon" alt="menu icon">
        <ul id="nav_ul">
            <li><a href="#">Home</a></li>
            <li><a href="#">Goal</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Class Schedule</a></li>
            <li><a href="#">ManaBadi Team</a></li>
            <li><a href="#">Photo Gallery</a></li>
            <li><a href="#">Video Gallery</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </header>
    <div id="media_scroll">
        <div id="scrolling_text">
            <p>ManaBadi Admissions Open for 2015-2016 Academic Year.  To Open ManaBadi New Location Contact sarath@siliconandhra.org or Call 203 583 9537</p>
        </div>
    </div>
    <h3>Locations</h3>
<div>
    <ul id="button_ul">
        <li>
            <button id="select_region_button"><p>Select Region</p></button>
            <ul class="dropdown_menu" id="region_dropdown_menu">
                <li class="region_locations">Select Region</li>
                <li class="region_locations"><a href="#">USA South-West</a></li>
                <li class="region_locations"><a href="#">USA Mid-West</a></li>
                <li class="region_locations"><a href="#">USA South-East</a></li>
                <li class="region_locations"><a href="#">USA North-East</a></li>
                <li class="region_locations"><a href="#">USA West</a></li>
                <li class="region_locations"><a href="#">Hong Kong</a></li>
                <li class="region_locations"><a href="#">UK</a></li>
                <li class="region_locations"><a href="#">Canada</a></li>
                <li class="region_locations"><a href="#">Kuwait</a></li>
                <li class="region_locations"><a href="#">Norway</a></li>
                <li class="region_locations"><a href="#">Singapore</a></li>
                <li class="region_locations"><a href="#">New Zealand</a></li>
                <li class="region_locations"><a href="#">Malaysia</a></li>
                <li class="region_locations"><a href="#">Austrailia</a></li>
                <li class="region_locations"><a href="#">Dubai</a></li>
                <li class="region_locations"><a href="#">Scotland</a></li>
                <li class="region_locations"><a href="#">Nigeria</a></li>
                <li class="region_locations"><a href="#">South Africa</a></li>
                <li class="region_locations"><a href="#">Netherlands</a></li>
                <li class="region_locations"><a href="#">Switzerland</a></li>
                <li class="region_locations"><a href="#">Kingdom of Saudi Arabia</a></li>
            </ul>
        </li>
        <li>
            <button id="select_state_button"><p>Select State</p></button>
            <ul class="dropdown_menu" id="state_dropdown_menu">
                <li class="state_locations">Select State</li>
            </ul>
        </li>
        <li>
            <button id="select_city_button"><p>Select City</p></button>
            <ul class="dropdown_menu" id="city_dropdown_menu">
                <li class="city_locations">Select City</li>
            </ul>
        </li>
        <li>
            <button>GO</button>
        </li>
    </ul>
</div>
<div id="school_info_container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>

还有我的CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (pub.*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*=============================RESET=================================*/

body, html {
    width: 100%;
    height: auto;
}

#main_content_container {
    width: 80%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    margin-top: 5%;
    padding: 10px;
    box-shadow: 2px 2px 10px lightgrey;
    -webkit-box-shadow: 2px 2px 10px lightgrey;
    -moz-box-shadow: 2px 2px 10px lightgrey;
    -ms-box-shadow: 2px 2px 10px lightgrey;
    -o-box-shadow: 2px 2px 10px lightgrey;
}

span {
    position: absolute;
    font-size: 3em;
    top: 15px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 201px;
    height: 45px;
    margin: 0 auto;
    border-bottom: 2px solid black;
}

#nav_ul {
    width: 58%;
    margin: 0 auto;
}

#nav_ul li {
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 1em;
    border-right: 1px solid black;
}

#nav_ul li:hover {
    background-color: yellow;
}

#nav_ul li:nth-child(10) {
    border-right: none;
}

#button_ul {
    width: auto;
    margin: 10px 0 10px 0;
}

#button_ul li {
    display: inline-block;
    padding: 0 20px;
}

#region_dropdown_menu li, #state_dropdown_menu li, #city_dropdown_menu li {
    width: auto;
    display: block;
    height: auto;
    padding: 2px 0;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:visited {
    color: blue;
}

#hamburger_menu_icon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    right: 0;
    bottom: 0;
    left: 15px;
}

#hamburger_menu_icon:hover {
    /*background-color: #66D9EF;*/
    background-color: yellow;
}

#media_scroll {
    display: none;
}

@media screen and (max-width: 1390px) {
    #main_content_container {
        margin-top: 6%;
    }
}

@media screen and (max-width: 1100px) {
    #main_content_container {
        margin-top: 7%;
    }
}

@media screen and (max-width: 975px) {
    #main_content_container {
        margin-top: 8%;
    }
}

@media screen and (max-width: 845px) {
    #main_content_container {
        margin-top: 9%;
    }
}

@media screen and (max-width: 740px) {
    #main_content_container {
        margin-top: 12%;
    }
}

@media screen and (max-width: 555px) {
    #main_content_container {
        margin-top: 14%;
    }
}

@media screen and (max-width: 475px) {
    #main_content_container {
        margin-top: 16%;
    }


@media screen and (max-width: 416px) {
    #main_content_container {
        margin-top: 19%;
    }
}

Answer 1

将position:absolute添加到.dropdown_menu的css，它将停止菜单将页面内容向下推送。

Answer 2

这是您的问题：您的菜单存在。

我知道，这听起来很讽刺，但这是真的。因为包含菜单的元素是内联的并且 在那里 ，所以一旦展开它，它就会将内容向下推。一个快速解决方法是将其定位为与 relative 不同的位置 - 因为 relative 会将其放置在 相对于 其他周围内容的位置。尝试 position: absolute。它看起来不太好，因为您必须以这种方式设置不同的样式（给它一个背景等...）。通常人们使用 position: fixed; 来相对于视口放置它。

这是一个简单的例子，只需单击按钮将定位从 relative 切换到位置 absolute，然后使用 'show' 按钮查看小动画如何显示 a推送内容和不推送内容的区别：

$("#switch").click(function(){ $("#menu").toggleClass("absolute"); });
$("#show").click(function(){ $("#menu").toggleClass("show"); });

html, body {
  height: 100%;
}

body > div {
  width: 100%;
  height: 30%;
  background: red;
}
body #content { background: yellow; }
body #menu {
  height: 0;
  -webkit-transition: height 500ms;
  transition: height 500ms;
  background: blue;
  overflow: hidden;
  position: relative;
}
body #menu.absolute {
  position: absolute;
  top: 0;
  left: 0;
}
body #menu.show {
  height: 20%;
}

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

<div id="header"></div>
<div id="menu">My Menu</div>
<div id="content"></div>

<br />
<input type="button" value="show" id="show" />
<input type="button" value="Switch relative with absolute" id="switch" />

但是请注意这一点，因为定位 absolute 的元素是从最近的具有定位设置的父级定位的。因此，如果您制作包装器 relative，您的菜单将从包装器的左上角开始定位，而不是您的页面（尽管这可能是您正在寻找的结果）。要根据视口修复它，请使用 fixed。 fixed（几乎）受其他环绕元素的影响（除非您忘记设置两个定位坐标，如 top 或 left）。

单击按钮可移动整个 HTML 正文

Button Click Moves Entire HTML Body

html

css

jquery

button

drop-down-menu