如何在不扩展导航的情况下切换显示隐藏

Question

为庞大的列表建立索引。但是每次我单击一个字母时，它都会显示内容，但它也会将索引栏（左侧导航）上的其他字母向下推。我希望它们在切换内容时保持折叠状态。我尝试使用浮动，并且有效，但它漂浮到很远。我使用了margin-left，它有时会根据浏览器的大小起作用。现在我正在尝试用 jquery 清除浮动，螺母做错了什么。这是我在小提琴https://jsfiddle.net/jim54729/zsofv9dm/1/ 中的示例，这是我的一些代码：我不得不删除我的 ul 元素，因为它弄乱了我在 jfiddle 中的 css。一定是从我们的 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/