Как я могу переключить мое шоу скрыть без расширения моей навигации

Question

Создание индекса для огромного списка. Но каждый раз, когда я нажимаю на букву, она будет отображать содержимое, но также отталкивает другие буквы на полосе указателя (левая навигация) вниз. Я хочу, чтобы они оставались разрушенными при переключении содержимого. Я попытался использовать float, и это сработало, но оно уплыло далеко. Я использовал margin-left, и это иногда будет работать в зависимости от размера браузера. Сейчас я пытаюсь очистить поплавки с помощью jquery, а я что-то не так делаю. Вот мой пример в скрипте https://jsfiddle.net/jim54729/zsofv9dm/1/ и вот мой код: мне пришлось удалить элементы ul, поскольку они испортили мой css в jfiddle. должен был вытащить форматирование из нашего core.css.

<div class="list-container ">  
  <div class="title">
    <button>A</button>
  </div>
  <div class="title-contents"> 
   <li class="contents-description">
     <a href="#">&#10009; 50 Wheel Mfg.</a>&nbsp;&nbsp;&nbsp;<span style="font-size:100%;color:yellow;">
     <a href="#">&starf;</a></span>
   </li>
   <p>
    <strong>Class Code:</strong> 50
    <br><strong>Premium Base: </strong>Gross Sales
    <br><strong>Note:</strong>
    <br>The following shall be separately classified and rated:
    <br>- food
    <br>- drink
   </p>
 </div>
 <div class="title">
  <button>B</button>
 </div>
</div>

и мой JQuery

$(document).ready(function() {
  $('.title-contents').hide();
  $('p').hide();

  $('.title').click(function() {
    $(this).next('.title-contents').css({"marginLeft": "200px"
    }).css({"clear": "both"}).fadeToggle(700);
  });

  $('.contents-description').click(function() {
    $(this).next('p').css("background-color", "white").fadeToggle(700);
    $(this).css("font-weight", "bold");
  });

});

Answer 1

Вы можете подать заявку position: absolute; на ваш .title-contents поэтому они вне потока. Таким образом, они не будут толкать следующие навигационные элементы вниз по странице.

Вот обновленная скрипка https://jsfiddle.net/zsofv9dm/2/