Как сохранить горизонтальное выравнивание элементов внутри расширяющегося элемента списка? - PullRequest
Новая
       16

Как сохранить горизонтальное выравнивание элементов внутри расширяющегося элемента списка?

0 голосов
/ 09 октября 2018

Мне было поручено оформить веб-сайт, где я столкнулся с препятствием в отношении горизонтального выравнивания элементов внутри элементов списка.

Я повторил структуру рассматриваемого меню с помощью this JSFiddle.

Я хочу знать, как я могу сохранить положение зеленых делителей (как показано с самого начала), когда я раскрываю меню, используя кнопку на скрипке.Мне нужно, чтобы они сохраняли горизонтальное выравнивание с первым элементом <a> в соответствующем элементе <li>, когда отображаются подменю.

1 Ответ

0 голосов
/ 09 октября 2018

вы можете сделать это, например, так: 

<html>
  <script>
    function clickFunction(){
      var elements = document.getElementsByClassName("submenu");
      for(var i = 0; i < elements.length; i++){
        elements[i].classList.toggle("display-sublist");
      }
    }
  </script>
  <style>
    ul{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    ul li{
      width: 100%;
      background-color: blue;
    }
    .submenu{
      display: none;
    }
    .display-sublist{
      display: block;
    }
    ul li a{
      width: 95%;
      background-color: red;
    }
    .main-test {
      display: inline-block;
      float: left;
      width: 90%;
    }
    .cancel-test{
      display: inline-block;
      background-color: green;
      float: right;
      width: 10%;
    }
    .expand-button{
      clear: both;
      display: block;
    }
  </style>
  <body>
    <ul>
      <li>
        <a class="main-test" href="#">Something</a>
        <a class="cancel-test">x</div>
        <ul class="submenu">
          <li>
            <a href="#">Sub-Something</a>
          </li>
          <li>
            <a href="#">Sub-Something</a>
          </li>
          <li>
            <a href="#">Sub-Something</a>
          </li>
        </ul>       
      </li>
      <li>
        <a class="main-test"href="#">Something</a>
        <a class="cancel-test">x</a>
          <ul class="submenu">
            <li>
              <a href="#">Sub-Something</a>
            </li>
            <li>
              <a href="#">Sub-Something</a>
            </li>
          </ul>         
        </li>
        <li>
          <a href="#">Something</a>
        </li>
        <li>
          <a href="#">Something</a>
        </li>
      </ul>
		<button onclick="clickFunction()" class="expand-button">Expand</button>
	</body>
</html>
...