的Javascript用于定制手风琴

滚动到选定的面板的顶部我有一个垂直滚动条的大手风琴。当用户点击它时，我需要一个javascript将选定面板及其内容平滑滚动到手风琴的顶部。点击面板1，然后点击面板2.面板2中途显示其内容。的Javascript用于定制手风琴

我已经看到了这个网站，并在jsfiddle.net与jQuery UI的手风琴和插件几个答案，但我的手风琴的结构不是一个类似于jQuery中。这是我的第一个网站，我是JavaScript和jQuery的新手。

我有正常工作与滑动功能，并非常希望保持它的脚本。我宁愿不使用任何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>

来源

2014-09-30 Kira

非常感谢您看我的代码。我希望实现的是，当用户点击面板2时，脚本应该折叠面板1的内容（如果它被打开）并将顶部面板1头部向外滚动，即将其推到上方并将面板2头部放到顶部手风琴盒的内容并显示其内容。我希望手风琴的整个高度为400px。类似于http://www.stampede-design.com/blog/demo/shaiful/large-accordion/large-accordion-fix.html中所述的效果。我不明确自己的道歉。谢谢。 – Kira 2014-09-30 14:16: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>

来源

2014-09-30 02:26:01 loki9

的Javascript用于定制手风琴

回答

相关问题