2個帶下拉式按鈕的堆疊式按鈕100％容器寬度

Question

我一遍又一遍地搜索了2個問題的解決方案，我在響應式頁面中提供了2個按鈕，這些按鈕在點擊上顯示下拉按鈕，但我找不到在我的情況下工作。

問題1：一次顯示一個下拉列表，因爲現在，您可以單擊一個下拉顯示，如果單擊第二個按鈕，下拉列表也會打開，而不會關閉第一個下拉列表。

問題2：使下拉寬度與黃色容器一樣寬（如10px填充窗口的100％）。這必須在不改變爲絕對位置來完成的.login註冊

  $('.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渲染出具有100％寬度的菜單，同時具有10px的邊距。下面的替代解決方案解決了這個問題，但需要對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，但需要在菜單週圍的額外包裝元素使元素跨越整個寬度，同時保持左右10px的邊距。

$('.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>

Answer 2

試試吧

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

當您在註冊登錄按鈕，點擊你將激活寄存器顯示none類和相同的註冊按鈕。