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/

如何在没有导航扩展的情况下切换我的节目隐藏

1 个答案: