2个堆叠按钮，下拉100％宽度的容器

时间：2015-10-23 19:04:45

标签： jquery css drop-down-menu

我一遍又一遍地搜索解决了2个问题的解决方案，我在一个响应式页面中有2个按钮显示点击下拉菜单，我没有设法找到适用于我的情况。

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

问题2：使下拉列表与黄色容器一样宽（如100％窗口，10px填充）。必须在不更改.login-register

的绝对位置的情况下完成此操作

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

          $('.register-toggle').click(function() {
            $('.register-menu').toggle();
            $('.register-toggle').toggleClass('activated');
          });
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：1)

解决方案＃1 - 无法更改HTML

此代码将解决问题1并部分解决问题2.由于登录/注册按钮周围的边距，因此不可能将未修改的HTML渲染出100％宽度的菜单，同时具有10px的边距。下面的替代解决方案解决了这个问题，但需要更改HTML。

＆＃13;
＆＃13; 
$('.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');
  }
});
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

＆＃13;
＆＃13; 
$('.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');
  }
});
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试吧

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

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

当你点击注册登录按钮时，你将激活注册显示无类和相同的注册按钮。

相关问题
最新问题