單擊jQuery手風琴時，需要轉到頁面頂部
[英]When jQuery accordion is clicked, needs to go to top of page
問題描述
我在jQuery中有一個手風琴布局，其中一部分已經變得很大。 我需要能夠單擊不同的部分，並打開手風琴，並且右側的滾動條一直位於頁面右側的頂部。 我嘗試了，但是那沒有用，使手風琴破裂了。 如何單擊鏈接並使手風琴停留在頁面頂部？
碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="demo/dialog.css" media="screen" />
<link rel="stylesheet" type="text/css" href="fixed-box/fixed-box/style-accordion.css" media="screen"/>
<script>
$(document).ready(function()
{
$('#other').change(function()
{
$('#otherrace').parent().toggle(this.checked).focus();
});
$("#toggleElement").change(function() {
$('input[name=living]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#accordion").accordion();
$('[name*="race"]').click(function() { $('#otherrace').css('visibility', $('#other').attr('checked') ? 'visible':'hidden'); });});$(document).ready(function() {
$('[name*="RadioGroup1"]').click(function() {
$('#RadioGroup1_11').css('visibility', $('#RadioGroup1_10').attr('checked') ? 'visible':'hidden');
});
});
</script>
</head>
<body style="font-size:75%" >
<div id="centerColumn">
<div id="accordion">
<h6><i can't post one than one link>Demographcis</a></h6>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<th width="18%" scope="row">Last Name</th>
<td width="31%"><form name="form1" method="post" action="">
<input type="text" name="textfield" id="textfield" maxlength="20">
</form></td>
<td width="4%"> </td>
<td width="47%"> </td>
</tr>
<tr>
<th scope="row">Middle Initial</th>
<td><form name="form2" method="post" action="">
<input type="text" size="3" maxlength="1" name="textfield2" id="textfield2">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">First Name</th>
<td><form name="form3" method="post" action="">
<input type="text" name="textfield4" id="textfield4" maxlength="20">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Address</th>
<td><form name="form4" method="post" action="">
<input type="text" size="35" name="textfield5" id="textfield5" maxlength="35">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Rural Route#</th>
<td><form name="form5" method="post" action="">
<input type="text" name="textfield6" id="textfield6" maxlength="8">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">City</th>
<td><form name="form6" method="post" action="">
<input type="text" name="textfield7" id="textfield7" maxlength="20">
</form></td>
<td>State</td>
<td><form name="form7" method="post" action="">
<input type="text" size="2" maxlength="3" name="textfield8" id="textfield8">
ZIP
<input type="text" maxlength="5" size="6" name="textfield9" id="textfield9">
</form></td>
</tr>
<tr>
<th scope="row">DOB</th>
<td><form name="form8" method="post" action="">
<input type="text" size="11" maxlength="10" name="textfield10" id="textfield10">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Phone</th>
<td><form name="form9" method="post" action="" >
<input type="text" size="12" maxlength="13" name="textfield11" id="textfield11">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Gender</th>
<td><form name="form10" method="post" action="">
<p>
<input type="radio" name="Gender" value="female" id="Gender_0">
Female
<br>
<input type="radio" name="Gender" value="male" id="Gender_1">
Male
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Race/Ethnicity</th>
<td>
<p>
<input type="checkbox" name="race_" value="asian" id="race_0">
Asian
<br>
<input type="checkbox" name="race_" value="white" id="race_1">
White
<br>
<input type="checkbox" name="race_" value="black" id="race_2">
Black
<br>
<input type="checkbox" name="race_" value="latino" id="race_3">
Latino
<br>
<input type="checkbox" name="race_" value="island" id="race_4">
Pacific Islander
<br>
<input type="checkbox" name="race_" id="other"value="other" />Other, specify<br />
<div style="display:none" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
<br>
</p>
<input type="text" style="display:none;" name="race_" value="other1" id="otherrace">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Living Arragenments</th>
<td><form name="form11" method="post" action="">
<p>With whom do you live? Choose all that apply<br/>
<input type="checkbox" name="living" value="alone" id="living">
Live alone
<br>
<input type="checkbox" name="living" value="husband" id="living">
Husband
<br>
<input type="checkbox" name="living" value="partner" id="living">
Partner
<br>
<input type="checkbox" name="living" value="children" id="living">
Children
<br>
<input type="checkbox" name="living" value="parents" id="living">
Parents
<br>
<input type="checkbox" name="living" value="other_relatives" id="living">
Other relatives
<br>
<input type="checkbox" name="living" value="religion" id="living">
Religious order
<br>
<input type="checkbox" name="living" value="no_answer"
id="toggleElement">
Choose not to answer
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Education</th>
<td>Highest level of education:<br/>
<form name="form12" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="less_high" id="RadioGroup1_0">
Less than high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_high" id="RadioGroup1_1">
Some high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="high" id="RadioGroup1_2">
High school diploma</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="ged" id="RadioGroup1_3">
GED</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_college" id="RadioGroup1_4">
Some college</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="votech" id="RadioGroup1_5">
Vocational or technical</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="associates" id="RadioGroup1_6">
Associates degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="bachelor" id="RadioGroup1_7">
Bachelor's degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="postgrad" id="RadioGroup1_8">
Post graduate training</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="no_answer_school" id="RadioGroup1_9">
Choose not to answer</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="other_ed"
id="RadioGroup1_10">
Other<br/></label>
<div id="RadioGroup1_9"> <input style="visibility:hidden" type="text" name="fname" size="25" maxlength="25" id="RadioGroup1_11" /></div>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Insurance</th>
<td>Choose your insurance-check all that apply<br>
<form name="form13" method="post" action="">
<p>
<label>
<input type="checkbox" name="insurance" value="privateins" id="insurance_0">
Private/HMO/PPO</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicaid" id="insurance_1">
Medicaid</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicare" id="insurance_2">
Medicare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="va" id="insurance_3">
VA/Tricare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noins" id="insurance_4">
No insurance</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noknowins" id="toggleInsurance">
</label>
<label>Choose not to answer</label>
<br>
<label>
<input type="checkbox" name="insurance" value="no_ans_ins" id="insurance_6">
</label>
Do not know<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Income</th>
<td>Gross income of your household<br>
<form name="form14" method="post" action="">
<p>
<label>
<input type="radio" name="income" value="tenk" id="income_0">
Less than $10,000</label>
<br>
<label>
<input type="radio" name="income" value="fifteenk" id="income_1">
Less than $15,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyk" id="income_2">
Less than $20,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyfivek" id="income_3">
Less than $25,000</label>
<br>
<label>
<input type="radio" name="income" value="thirtyfivek" id="income_4">
Less than $35,000</label>
<br>
<label>
<input type="radio" name="income" value="fiftyk" id="income_5">
Less than $50,000</label>
<br>
<label>
<input type="radio" name="income" value="seventyfivek" id="income_6">
Less than $75,000</label>
<br>
<label>
<input type="radio" name="income" value="dontknow" id="income_7">
I don't know</label>
<br>
<label>
<input type="radio" name="income" value="no_answer_income" id="income_8">
Choose not to answer</label>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<h3><i can't post one than one link>Injury Information</a></h3>
<div>
<p>
blahlbalh
</p>
</div>
</div>
</div>
</body>
</html>
2 個解決方案
解決方案1
0 2010-12-15 14:17:47
嘗試
object.scrollIntoView(); // moves the viewport
要么
window.scrollTo(0,0); // scrolls the window
很難根據您的帖子猜測出哪里，但是也許
$('[name*="RadioGroup1"]').click(function() {
$(this).scrollIntoView();
解決方案2
0 2010-12-15 14:18:29
您可以在對象上或創建對象時將事件綁定到您的手風琴。
因此，更改您的$('#accordion').accordion(); 至
$('#accordion').accordion({
changestart: function() {
window.scrollTo(0, 0);
}
});
每當手風琴發生更改時， changestart事件就會觸發（單擊或您的事件是什么）。
單擊具有手風琴中的元素的id的鏈接時，打開JQuery手風琴
[英]Open JQuery accordion when link with an id of element within the accordion is clicked
Bootstrap手風琴-頁面首先跳至底部，然后跳至第一期
[英]Bootstrap Accordion - Page jumps to bottom first then go to top issue
單擊鏈接時在導航中使用jQuery - 轉到目標頁面，然后滾動到頁面的特定部分
[英]Using jQuery in navigation when link is clicked - go to target page, then scroll to a specific section of page
Accordion JS 問題 - 單擊時它會打開到手風琴的底部，而不是停留在我單擊的頂部
[英]Accordion JS Problem - when click it opens to the bottom of the accordion instead of staying at top where i clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.