javascript - 下拉菜单javascript函数

Question

我有一个下拉菜单。它由 3 个按钮组成，因此只有主按钮可见。当您将鼠标悬停在说莱佛士的主按钮上时，它会使按钮向上移动。然后其他 3 个按钮中的 1 个向下移动，最后一个按钮保持静止。这将创建一个紧凑的下拉菜单。除了 1 个问题外，它工作得很好。我将其设置为当您悬停每一个时，它会将它们移动到需要的位置。问题是，当我开始将鼠标悬停在另一个按钮上时(在它们移动之后)它们都开始再次移动，因为我停止将鼠标悬停在 1 个按钮上并开始将鼠标悬停在下一个按钮上。我怎样才能防止这种情况发生？

var dropdown = function() {
    $('.inbutton, .dr1button, dr2button').hover(function() {
        $('.inbutton').animate({
            top: '-183px'
        }, 200);
        $('.dr2button').animate({
            top: '0px'
        }, 200);
    }, function() {
        $('.inbutton').animate({
            top: '-122px'
        }, 200);
        $('.dr2button').animate({
            top: '-61px'
        }, 200);
    });
};


$(document).ready(dropdown);

p.button {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    transition: height 0.2s ease;
}

p.button:hover {
    height: 110%;
    border-bottom: 0px;
    cursor: pointer;
}

p.dbutton {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    vertical-align: middle;
    line-height: 30.5px;
    text-align: center;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    transition: height 0.2s ease;
}

p.dbutton:hover {
    height: 110%;
    border-bottom: 0px;
    cursor: pointer;
}

p.inbutton {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    top: -122px;
    z-index: 98;
}

p.inbutton:hover {
    border-bottom: 0px;
    cursor: pointer;
}

p.dr1button {
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    height: 100%;
    width: 144px;
    position: relative;
    z-index: 97;
    transition: background-color 0.2s ease;
}

p.dr1button:hover {
    background-color: #585858;
    cursor: pointer;
}

p.dr2button {
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    height: 100%;
    width: 144px;
    position: relative;
    top: -61px;
    z-index: 98;
    transition: background-color 0.2s ease;
}

p.dr2button:hover {
    background-color: #585858;
    cursor: pointer;
}

div.navbardivider {
    height: 61px;
    width: 1px;
    background-color: #424242;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    float: left;
}

div.dropdown {
    width: 144px;
    float: left;
}

div.divider:hover {
    cursor: pointer;

<div id="buttons">
  <!--Home button-->
  <a href="/"><p class="button">- Home</p></a>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Raffles Button-->
  <div class="dropdown">
    <a href="/raffles.php">
      <p class="dr1button">Open</p>
    </a>
    <a href="/clraffles.php">
      <p class="dr2button">Closed</p>
    </a>
    <p class="inbutton">Raffles</p>
  </div>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Get tokens Button-->
  <a href="/gettokens.php"><p class="dbutton">Get<br>Tokens</p></a>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Token lotto Button-->
  <a href="/lotto.php"><p class="dbutton">Token<br>Lotto</p></a>
</div>

Answer 1

你的问题在这里:

$('.inbutton, .dr1button, dr2button').hover

你有几个问题。通过单独触发按钮，您可以将鼠标移出一个按钮，然后再将鼠标悬停在另一个按钮上。它在重新打开之前触发关闭。这会导致弹跳效果。你也错过了“。”在 dr2button 前面，所以它根本不会触发悬停效果。

我会改用包装器:

$('.dropdown').hover

这样，一旦您将鼠标悬停在下拉菜单上，它就会保持打开状态，直到您将鼠标移开。看看这个 fiddle :http://jsfiddle.net/r5Lyga84/