用于在自定义手风琴中滚动到所选面板顶部的Javascript
[英]Javascript for scrolling to the top of selected panel in customised accordion
问题描述
I have a large accordion with a vertical scroll bar. 
我有一个带有垂直滚动条的大型手风琴。 I need a javascript to smoothly scroll the selected panel and its contents to the top of the accordion when a user clicks on it. 当用户单击面板时，我需要一个JavaScript才能将所选面板及其内容平滑滚动到手风琴的顶部。 Click on Panel 1 and then on Panel 2. Panel 2 displays its contents midway. 单击面板1，然后在面板2上。面板2在中途显示其内容。
I have seen several answers related to jQuery ui accordions and plugins in this website and on jsfiddle.net but the structure of my accordion isn't similar to the one in jQuery. 我已经在该网站和jsfiddle.net上看到了一些与jQuery ui手风琴和插件有关的答案，但是我的手风琴的结构与jQuery中的结构并不相似。 This is my first website and I am new to javascript and jQuery. 这是我的第一个网站，并且是javascript和jQuery的新手。
I have a javascript that works fine with the sliding feature and would very much like to keep it. 我有一个可以很好地与滑动功能配合使用的javascript，非常希望保留它。 I prefer not to use any jQuery plugin until I learn how to do so with confidence. 我宁愿不使用任何jQuery插件，除非我有信心地学习如何使用。 Could someone please be kind enough to modify my javascript to accomodate the scrolling function? 有人可以请客气地修改我的JavaScript以适应滚动功能吗？ Have tried reading many stuff such as getting the panel's content height and using a scroll to function etc. but after three long days I am still struggling to put together a script that works. 尝试阅读许多内容，例如获取面板的内容高度和使用滚动条等功能，但经过三天的忙碌之后，我仍在努力编写一个有效的脚本。 Please find attached my html and javascript code. 请找到随附的我的html和javascript代码。 Thank you very much for any help and assistance. 非常感谢您的帮助和协助。
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
I edited your css and set the min-height for your panel content. 我编辑了您的CSS并为您的面板内容设置了最小高度。 please see the code snippet below. 请参见下面的代码段。 I hope this helps! 我希望这有帮助！
/*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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.