jquery - 2 个带有下拉菜单的堆叠按钮 100% 容器宽度

Question

我一遍又一遍地寻找解决方案，以解决我在响应页面中遇到的 2 个问题，这些问题涉及 2 个按钮，这些按钮在单击时显示下拉菜单，但我没有找到适合我的情况的方法。

问题 1:一次显示一个下拉菜单，因为现在，您可以单击一个下拉菜单，如果您单击第二个按钮，它的下拉菜单也会打开，而不会关闭第一个下拉菜单。

问题 2:使下拉菜单与黄色容器一样宽(例如 100% 的窗口具有 10px 的填充)。这必须在不改变 .login-register 的绝对位置的情况下完成

          $('.login-toggle').click(function() {
            $('.login-menu').toggle();
            $('.login-toggle').toggleClass('activated');
          });

          $('.register-toggle').click(function() {
            $('.register-menu').toggle();
            $('.register-toggle').toggleClass('activated');
          });

.container {
  padding: 10px 0;
  box-sizing: border-box;
  background-color: yellow;
  height: 500px;
  position: relative;
}
.login-register {
  position: absolute;
  right: 10px;
}
.login {
  background-color: #ccc;
  display: block;
  vertical-align: top;
}
.login .login-toggle {
  color: #fff;
  display: block;
  font-size: 15px;
  overflow: hidden;
  padding: 6px 26px 6px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-menu,
.register-menu,
.user-forms .inner {
  margin: 0;
  position: absolute;
  right: 0;
  width: 100%;
}
.user-forms {
  padding: 0;
  width: auto;
}
.register {
  background-color: #ddd;
  display: block;
  vertical-align: top;
}
.register .register-toggle {
  color: #fff;
  display: block;
  font-size: 15px;
  padding: 6px 10px 6px 26px;
}
.login-menu,
.register-menu {
  background-color: #0089d7;
  color: #fff;
  display: none;
  list-style: outside none none;
  position: absolute;
  right: 0;
  text-align: left;
  top: 100%;
  width: 100%;
  z-index: 1000;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
  <div class="login-register">
    <div class="login">
      <a class="login-toggle" href="#/">Your account</a>
      <ul class="login-menu">
        <li>
          <div class="content user-forms">Login dropdown content</div>
        </li>
      </ul>
    </div>
    <div class="register">
      <a class="register-toggle" href="#/">Register</a>
      <ul class="register-menu">
        <li>
          <div class="content user-forms">Register dropdown content</div>
        </li>
      </ul>
    </div>
  </div>
</div>

任何解决方案都必须与 ie8 兼容且响应迅速。谢谢

Answer 1

解决方案 #1 - 不更改 HTML

此代码将解决问题 1 并部分解决问题 2。由于登录/注册按钮周围的边距，未修改的 HTML 无法在具有 10px 边距的情况下以 100% 宽度呈现菜单。下面的替代解决方案解决了这个问题，但需要更改 HTML。

$('.login-toggle').click(function() {
  $('.login-menu').toggle();
  $('.login-toggle').toggleClass('activated');
  if ($('.login-toggle').hasClass('activated')) {
    $('.register-menu').hide();
    $('.register-toggle').removeClass('activated');
  }
});

$('.register-toggle').click(function() {
  $('.register-menu').toggle();
  $('.register-toggle').toggleClass('activated');
  if ($('.register-toggle').hasClass('activated')) {
    $('.login-menu').hide();
    $('.login-toggle').removeClass('activated');
  }
});

body {
  margin: 0; // reset code snippet's margins to have consistent layout
}
.container {
  padding: 10px 0;
  box-sizing: border-box;
  background-color: yellow;
  height: 500px;
  position: relative;
}
.login-register {
  position: absolute;
  right: 10px;
}
.login {
  background-color: #ccc;
  display: block;
  vertical-align: top;
}
.login .login-toggle {
  color: #fff;
  display: block;
  font-size: 15px;
  overflow: hidden;
  padding: 6px 26px 6px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-menu,
.register-menu,
.user-forms .inner {
  margin: 0;
  position: absolute;
  right: 0;
  width: 100%;
}
.user-forms {
  padding: 0;
  width: auto;
}
.register {
  background-color: #ddd;
  display: block;
  vertical-align: top;
}
.register .register-toggle {
  color: #fff;
  display: block;
  font-size: 15px;
  padding: 6px 10px 6px 26px;
}
.login-menu,
.register-menu {
  background-color: #0089d7;
  color: #fff;
  display: none;
  list-style: outside none none;
  position: fixed;
  right: 0;
  text-align: left;
  width: 100%;
  z-index: 1000;
  height: 300px;
  margin: 0;
  padding: 0;
}
.login-menu {
  margin-top: 28px; // prevent the menu from obstructing the register button
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
  <div class="login-register">
    <div class="login">
      <a class="login-toggle" href="#/">Your account</a>
      <ul class="login-menu">
        <li>
          <div class="content user-forms">Login dropdown content</div>
        </li>
      </ul>
    </div>
    <div class="register">
      <a class="register-toggle" href="#/">Register</a>
      <ul class="register-menu">
        <li>
          <div class="content user-forms">Register dropdown content</div>
        </li>
      </ul>
    </div>
  </div>
</div>

---

解决方案 #2 - 需要更改 HTML

此代码增强了之前的解决方案并将完全解决问题 2，但需要在菜单周围添加一个额外的环绕元素，以使该元素跨越整个宽度，同时保持左右 10 像素的边距。

$('.login-toggle').click(function() {
  $('.login-menu-wrapper').toggle();
  $('.login-toggle').toggleClass('activated');
  if ($('.login-toggle').hasClass('activated')) {
    $('.register-menu-wrapper').hide();
    $('.register-toggle').removeClass('activated');
  }
});

$('.register-toggle').click(function() {
  $('.register-menu-wrapper').toggle();
  $('.register-toggle').toggleClass('activated');
  if ($('.register-toggle').hasClass('activated')) {
    $('.login-menu-wrapper').hide();
    $('.login-toggle').removeClass('activated');
  }
});

body {
  margin: 0; // reset code snippet's margins to have consistent layout
}
.container {
  padding: 10px 0;
  box-sizing: border-box;
  background-color: yellow;
  height: 500px;
  position: relative;
}
.login-register {
  position: absolute;
  right: 10px;
}
.login {
  background-color: #ccc;
  display: block;
  vertical-align: top;
}
.login .login-toggle {
  color: #fff;
  display: block;
  font-size: 15px;
  overflow: hidden;
  padding: 6px 26px 6px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-menu-wrapper,
.register-menu-wrapper,
.user-forms .inner {
  margin: 0;
  position: absolute;
  right: 0;
  width: 100%;
}
.user-forms {
  padding: 0;
  width: auto;
}
.register {
  background-color: #ddd;
  display: block;
  vertical-align: top;
}
.register .register-toggle {
  color: #fff;
  display: block;
  font-size: 15px;
  padding: 6px 10px 6px 26px;
}
.login-menu-wrapper,
.register-menu-wrapper {
  display: none;
  position: fixed;
  right: 0;
  text-align: left;
  width: 100%;
  z-index: 1000;
  margin: 0;
}
.login-menu,
.register-menu {
  background-color: #0089d7;
  color: #fff;
  list-style: outside none none;
  height: 300px;
  padding: 0;
  margin: 0 10px;
}
.login-menu-wrapper {
  margin-top: 29px; // prevent the menu from obstructing the register button
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
  <div class="login-register">
    <div class="login">
      <a class="login-toggle" href="#/">Your account</a>
      <div class="login-menu-wrapper">
        <ul class="login-menu">
          <li>
            <div class="content user-forms">Login dropdown content</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="register">
      <a class="register-toggle" href="#/">Register</a>
      <div class="register-menu-wrapper">
        <ul class="register-menu">
          <li>
            <div class="content user-forms">Register dropdown content</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>