Question

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

＆＃13;

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);

＆＃13;

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;

＆＃13;

<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>

＆＃13;

Answer 1

你的问题在这里：

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

你有几个问题。通过单独触发按钮，您可以将鼠标移出一个按钮，然后将鼠标悬停在另一个按钮上。它会在重新开启前触发收盘。这导致弹跳效果。你也错过了＆＃34;。＆＃34;在dr2button前面所以它根本不会触发悬停效果。

我改为使用包装器：

$('.dropdown').hover

这样一旦你将鼠标悬停在下拉列表上，它就会一直打开，直到你鼠标移开。看看这个小提琴：http://jsfiddle.net/r5Lyga84/

下拉菜单javascript函数

1 个答案: