单击并打开子菜单后，如何使按钮保持在原位

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