如何在没有导航功能的情况下切换我的show hide

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/