用于在自定义手风琴中滚动到所选面板顶部的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.