Question

我使用带有position: absolute的元素构建了一个jQuery下拉菜单，菜单中的<ul>位于底部附近，而不是位于此下拉列表的顶部。这是一个显示网页的代码段。问题<ul>为蓝色文字（点击图片）：

function main() {
  $('#arrow').click(function(){
    $('.hidden').animate({
      top: '200px'
    }, 400);

    $('#slide-wrapper').animate({
      marginTop: '250px'
    }, 400);

    $(this).attr('src','uparrow.jpg');

    $(this).off();

    $(this).click(function(){
      $('.hidden').animate({
        top: '-=250'
      }, 400);

      $('#slide-wrapper').animate({
        marginTop: '0px'
      }, 400);

      $(this).attr('src','downarrow.jpg');

      $(this).off();

      main();
    });

  });
}

$(document).ready(main);

body {
  font-family: Arial;
  padding: 0px;
  margin: 0px;
}

/* Menu elements */

.hidden {
  z-index: -5;
  top: -50px;
  position: absolute;
}

#arrow {
  margin-left: auto;
  margin-right: auto;
  height: 50px;
  width: 50px;
  display: block;
}

#arrow-box {
  background-color: white; /* FOR NOW */
}

#banner {
  background-color: gray; /* For now, until I get some pictures in */
  width: 100%;
  height: 200px;
  margin: 0px;
  padding: 0px;
  top: 0px;
}

#dropdown {
  height: 300px;
  width: 100%;
  background-color: black;
}

.menu {
  float: left;
  color: blue;
  margin: 5px;
}

/* Fonts and such */

h1 {
  color: white;
  margin: 0px;
}

ul {
  margin: 0px;
}

.unstyled {
  list-style-type: none;
}

/* General structural elements */

#content {
  width: 75%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  background-color: white;
}

#slide-wrapper {
  background-color: #E6E6E6;
}

/* Footer stuff */

footer {
  height: 400px;
  background-color: gray; /* FOR NOW */
}

#footer-border {
  background-color: black; /* Probably dark blue later */
  width: 100%;
  height: 20px;
}

.right {
  float: right;
  padding: 10px;
  padding-left: 0px;
  padding-bottom: 0px;
  width: 50%;
}

.left {
  padding: 10px;
  display: inline-block;
}

.fields {
  float: right;
  padding: 2px;
}

label {
  padding-right: 5px;
}

#message {
  height: 150px;
}

#contact {
  margin-left: auto;
  margin-right: auto;
  width: 250px;
}

input, textarea {
  width: 200px;
  padding: 0px;
  margin: 0px;
  float: right;
}

.button {
  width: auto;
}

#copy {
  text-align: center;
}

<!DOCTYPE html>
  <head>
    <link rel="stylesheet" type="text/css" href="theme.css"/>
  </head>
  <body>
    <div id="banner">
      <h1>Company Name Placeholder</h1>
    </div>
    <div id="dropdown" class="hidden">
      <ul class="menu hidden unstyled">
        <li class="menu">Home</li>
        <li class="menu">About Me</li>
        <li class="menu">Get a Website</li>
        <li class="menu">Portfolio</li>
      </ul>
    </div>
    <div id="arrow-box">
      <img id="arrow" src="downarrow.jpg"/>
    </div>
  <div id="slide-wrapper">
    <div id="content">
      Page content will go here.
    </div>
    <footer>
        <div id="footer-border"></div>
        <div class="left">
          This will be about customers contacting me, etc.
        </div>
        <div class="right">
          <form id="contact" method="post" action"mail.php" accept-charset="UTF-8">
            <ul class="fields unstyled">
              <li class="fields"><label for="name">Full Name</label><input name="name" type="text" maxlength=50 placeholder="Your Name" required=""></input></li>
              <li class="fields"><label for="email-address">E-Mail</label><input type="email" name="email-address" maxlength=50 placeholder="you@example.com" required=""></input></li>
              <li class="fields"><label for="subject">Subject</label><input name="subject" type="text" maxlength=50 required=""></input></li>
              <li class="fields"><label for="message">Message</label><textarea id="message" name="message" maxlength=1000 required=""></textarea></li>
              <li class="fields"><input class="button" type="submit" value="Send" name="submit"></input></li>
            </ul>
          </form>
        </div>
        <p id="copy">&copy; 2015 - Evan Dempsey</p>
    </footer>
  </div>
    <!-- Scripts down here -->
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="menu.js"></script>
  </body>
</html>

Answer 1

问题在于你的.hidden css jQuery：

$('#arrow').click(function(){
$('.hidden').animate({
  top: '200px'
}, 400);

这将为所有元素提供“隐藏”类的顶部：200px，它既可以提供“下拉列表”，也可以提供下面的文字

要解决此问题，只需将“.hidden”替换为您的ID（“＃dropdown”），然后将一些顶部：50px替换为您的ul。

Working fiddle example

当然你也必须改变你的结束动画：

$(this).click(function(){
  $('#dropdown').animate({
    top: '-=250'
  }, 400);

Answer 2

我理解你正在寻找使用jQuery的答案，但同样的事情可以使用CSS完成，并且根据你的情况，它可能比加载脚本更容易实现。这可以通过将隐藏的复选框链接到下拉菜单来实现。

这是一个JSFiddle：https://jsfiddle.net/87dbmcj4/

HTML：

<input type='checkbox' id='button'>
<label for='button'>
    Toggle Dropdown
</label>
<div class='dropdown'>
    Insert menu here.
</div>

CSS：

.dropdown {
    max-height: 0;
    padding: 0 20px;
    transition: max-height 1s;
    overflow: hidden;
}

:checked ~ .dropdown {
    max-height: 200px; /* Set to anything larger than your menu */
}

<ul>位于父<div>的底部

2 个答案: