我在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>
答案 0 :(得分：0)
尝试
object.scrollIntoView(); // moves the viewport
或
window.scrollTo(0,0); // scrolls the window
很难根据你的帖子猜测，但也许
$('[name*="RadioGroup1"]').click(function() {
$(this).scrollIntoView();
或者看看这里：How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
答案 1 :(得分：0)
您可以在对象上或创建时将事件绑定到手风琴上。
所以请将$('#accordion').accordion();更改为
$('#accordion').accordion({
changestart: function() {
window.scrollTo(0, 0);
}
});
每次手风琴发生变化时，changestart事件都会触发（点击或你的事件是什么）。