用於在自定義手風琴中滾動到所選面板頂部的Javascript
[英]Javascript for scrolling to the top of selected panel in customised accordion
問題描述
我有一個帶有垂直滾動條的大型手風琴。 當用戶單擊面板時，我需要一個JavaScript才能將所選面板及其內容平滑滾動到手風琴的頂部。 單擊面板1，然后在面板2上。面板2在中途顯示其內容。
我已經在該網站和jsfiddle.net上看到了一些與jQuery ui手風琴和插件有關的答案，但是我的手風琴的結構與jQuery中的結構並不相似。 這是我的第一個網站，並且是javascript和jQuery的新手。
我有一個可以很好地與滑動功能配合使用的javascript，非常希望保留它。 我寧願不使用任何jQuery插件，除非我有信心地學習如何使用。 有人可以請客氣地修改我的JavaScript以適應滾動功能嗎？ 嘗試閱讀許多內容，例如獲取面板的內容高度和使用滾動條等功能，但經過三天的忙碌之后，我仍在努力編寫一個有效的腳本。 請找到隨附的我的html和javascript代碼。 非常感謝您的幫助和協助。
enter code here
/*jQuery time*/ $(document).ready(function() { $("#accordian h3").click(function() { //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if (!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) })
* { margin: 0; padding: 0; } #description { position: relative; top: 200px; width: 300px; height: 400px; border: 2px solid blue; } #accordian { font-family: arial, helvetica, sans-serif; background: #006F70; position: relative; top: 10px; width: 250px; margin: 0px 16px 0 16px; color: white; }
<html> <head> <link href="accordianFABtest-GS.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="description"> <div id="accordian"> <ul> <li> <h3>Panel 1</h3> <ul> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> </ul> </li> <li> <h3>Panel 2</h3> <ul> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> </ul> </li> <li> <h3>Panel 3</h3> <ul> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> </ul> </li> <li> <h3>Panel 4</h3> <ul> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> </ul> </li> </ul> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script src="accordian1.js" type="text/javascript"></script> </body> </html>
1 個解決方案
解決方案1
0 2014-09-30 02:26:01
我編輯了您的CSS並為您的面板內容設置了最小高度。 請參見下面的代碼段。 我希望這有幫助！
/*jQuery time*/ $(document).ready(function() { $("#accordian h3").click(function() { //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if (!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) })
* { margin: 0; padding: 0; } #description { position: relative; top: 200px; width: 300px; height: 400px; border: 2px solid blue; } #accordian { font-family: arial, helvetica, sans-serif; background: #006F70; position: relative; padding: 10px 0px; width: 250px; color: white; } // added line #accordian ul li ul{ max-height: 200px; overflow-y: auto; }
<html> <head> <link href="accordianFABtest-GS.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="description"> <div id="accordian"> <ul> <li> <h3>Panel 1</h3> <ul> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> </ul> </li> <li> <h3>Panel 2</h3> <ul> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> </ul> </li> <li> <h3>Panel 3</h3> <ul> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> </ul> </li> <li> <h3>Panel 4</h3> <ul> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> </ul> </li> </ul> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script src="accordian1.js" type="text/javascript"></script> </body> </html>
為什么Foundation 6的手風琴滾動到頁面頂部而不展開所選的標簽？
[英]Why is Foundation 6's accordion scrolling to the top of the page and not expanding the selected tab?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.