單擊並打開子菜單后，如何使按鈕保持在原位

Question

我有3個按鈕，當單擊它們時，它們會打開一個子菜單，但是每當單擊一個時，其他按鈕就會在頁面中移動，每當單擊一個按鈕時，如何保持它們的內聯？ 我嘗試過更改職位，但是后來他們都變成了彼此之間的變革，我們將不勝感激任何幫助，所以在此先感謝您！

這是我的代碼：

的HTML

<button class="menu-trigger btn-1">1</button>
<ul class="menu">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
<button class="menu-trigger btn-1">2</button>
<ul class="menu">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
<button class="menu-trigger btn-1">3</button>
<ul class="menu">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

的CSS

.menu-trigger{
    padding: 10px 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    background: transparent;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    color: lightgray;
}

.menu{
    display: none;
}

.menu.open{
    display:block;
}

.btn-1 {
    border: 2px solid yellow;
}

.btn-1:hover {
  background: #000;
  color: #fff;
}

JS

 $(function () {
      $(".menu-trigger").click(function () {
        $(this).next(".menu").toggleClass("open"); // Selects only the next one!
        $(this).html($(this).next(".menu").hasClass("open") ? menu-trigger : menu-trigger);
        return false;
      });
    });

Answer 1

您需要更改HTML標記並添加一些CSS規則才能起作用，所以我對代碼進行了一些更改。

1. 您需要首先用菜單ul包裝每個按鈕，然后將它們包裝到ul > li HTML標記中
2. 您需要使每個包裝每個<button> <ul>...</ul> </button> li進行display: inline-block; 和position: relative;
3. 使您的ul.menu位置absolute 。

在這里，您的代碼已被編輯。

 $(function () { $(".menu-trigger").click(function () { $(this).next(".menu").toggleClass("open"); // Selects only the next one! $(this).html($(this).next(".menu").hasClass("open") ? menu-trigger : menu-trigger); return false; }); }); 

 .menu-trigger{ padding: 10px 25px; font-family: 'Roboto', sans-serif; font-weight: 500; background: transparent; outline: none; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; color: lightgray; } .menu-container { list-style: none; margin: 0; padding: 0; } .menu-container > li { display: inline-block; position: relative; } .menu{ position: absolute; left: 0; display: none; } .menu.open{ display:block; } .btn-1 { border: 2px solid yellow; } .btn-1:hover { background: #000; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class='menu-container'> <li> <button class="menu-trigger btn-1">1</button> <ul class="menu"> <li>test</li> <li>test</li> <li>test</li> </ul> </li> <li> <button class="menu-trigger btn-1">2</button> <ul class="menu"> <li>test</li> <li>test</li> <li>test</li> </ul> </li> <li> <button class="menu-trigger btn-1">3</button> <ul class="menu"> <li>test</li> <li>test</li> <li>test</li> </ul> </li> </ul> 

我希望你覺得這對你有幫助

Answer 2

嘗試更改：

CSS：

  .menu{
    position: absolute;
    top: 100px;
    float:left;
    display: none;
   }

.btn-1 {
   float: left;
   border: 2px solid yellow;
 }

並在您的代碼中：

$(function () {
  $(".menu-trigger").click(function () {
      $(".menu").hide();
    $(this).next(".menu").toggleClass("open"); // Selects only the next one!
    $(this).next(".menu").show();
    $(this).html($(this).next(".menu").hasClass("open") ? menu-trigger : menu-trigger);
  });
});