的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用於定製手風琴

回答

相關問題