2016-01-28 71 views
0

建立一個巨大列表的索引。但每次點擊一個字母時,它都會顯示內容,但它也會將索引欄上的其他字母(左側導航欄)向下。切換內容時,我希望它們保持摺疊狀態。我嘗試使用浮動,並且工作,但它漂浮到很遠。我使用了margin-left,這有時取決於瀏覽器的大小。現在我正在嘗試用jquery清理浮動塊,做出錯誤的事情。這裏是我在小提琴https://jsfiddle.net/jim54729/zsofv9dm/1/中的例子,這裏是我的一些代碼:我不得不刪除我的ul元素,因爲它弄亂了jfiddle中的css。必須從我們的core.css中取消格式化。如何在沒有導航功能的情況下切換我的show hide

<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"); 
    }); 

}); 

回答

0

您可以申請position: absolute;.title-contents所以他們跳出流程。這樣他們就不會將下一個導航元素推到頁面上。

這裏有一個更新的小提琴https://jsfiddle.net/zsofv9dm/2/

+0

那點擊做工不錯,除了每個字母在對方提出的內容。有沒有辦法讓每個新的div出現在彼此之下?所以一旦你點擊了A,它的內容就會出現,並且在仍然可見的時候,如果你點擊b,我需要b的內容出現在A的內容下面。 –

+0

我將重寫代碼以保留字母(索引)與他們自己的ID單獨div打開點擊。希望不必重寫它,但在編碼之前我應該​​更好地進行計劃。 :(感謝您的想法。 –

相關問題