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

Question

I have 3 buttons that when clicked they open a submenu, but whenever one is clicked, the other ones move in the page, how can i keep them inline whenever one was clicked? I've tried changing the positions but then they all become change to be on top of each other, any help will be really appreciated so thank you in advance!

Here is my code:

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

You need to change your HTML markup and add some CSS rules to make work, so I did some changes to your code.

1. you need first to wrap each button with its menu ul , wrap them into ul > li HTML markup
2. you need to make each li that wrap each <button> <ul>...</ul> </button> make display: inline-block; and position: relative;
3. make your ul.menu with position absolute .

Here you have your code already edited.

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

I hope you find it helpful

Answer 2

Try changing:

CSS:

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

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

and in your code:

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