0

膨大なリストのインデックスを作成します。ただし、文字をクリックするたびに内容が表示されますが、インデックス バー (左ナビゲーション) の他の文字も押し下げられます。コンテンツを切り替えるときに折りたたまれたままにしたい。float を使用してみましたが、うまくいきましたが、遠くに浮かんでいました。margin-left を使用しましたが、ブラウザのサイズによってはうまくいく場合があります。今、私はjqueryでフロートをクリアしようとしていますが、ナットは何か間違っています。これがフィドルの私の例ですhttps://jsfiddle.net/jim54729/zsofv9dm/1/ とここに私のコードの一部があります.jfiddleでcssを台無しにしたため、ul要素を削除する必要がありました。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");
  });

});
4

1 に答える 1

0

お申し込みposition: absolute;いただいても構いません.title-contentsので、フロー外です。このようにして、次のナビゲーション要素をページの下に押し込むことはありません。

ここに更新されたフィドルがあります https://jsfiddle.net/zsofv9dm/2/

于 2016-01-28T17:56:46.590 に答える