我进行了搜索，有些人问过这个问题，但没有人给出足够的答案，而且大多数提问者都没有提供有用的示例代码。我把它简化为我正在尝试做但不起作用的事情。 Accordion 可以工作，但单选按钮却不能。有什么办法可以做到这一点吗？
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(
function()
{
$('#mystuff').accordion(
{
header: "div.hdr",
collapsible: true,
heightStyle: "content"
});
}
);
</script>
</head>
<body>
<form>
<div id="mystuff">
<div class="hdr">
<span><input type="radio" name="r1" value="A" checked="checked" /></span>
<span>Choose A</span>
<span><input type="radio" name="r1" value="B" /></span>
<span>Choose B</span>
</div>
<div>
This is the body for 1.
</div>
<div class="hdr">
<span><input type="radio" name="r2" value="A" checked="checked" /></span>
<span>Choose A</span>
<span><input type="radio" name="r2" value="B" /></span>
<span>Choose B</span>
</div>
<div>
This is the body for 2.
</div>
</div>
</form>
</body>
</html>
编辑:大卫·托马斯的建议有效。这是修改后的示例，已修复:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(
function()
{
$('#mystuff').accordion(
{
header: "div.hdr",
collapsible: true,
heightStyle: "content"
});
$('input[type=radio],label').on('click',function(e){e.stopPropagation();});
}
);
</script>
</head>
<body>
<form>
<div id="mystuff">
<div class="hdr">
<span><input id="r1a" type="radio" name="r1" value="A" checked="checked" /></span><label for="r1a">Choose A</label>
<span><input id="r1b" type="radio" name="r1" value="B" /></span><label for="r1b">Choose B</label>
</div>
<div>
This is the body for 1.
</div>
<div class="hdr">
<span><input id="r2a" type="radio" name="r2" value="A" checked="checked" /></span><label for="r2a">Choose A</label>
<span><input id="r2b" type="radio" name="r2" value="B" /></span><label for="r2b">Choose B</label>
</div>
<div>
This is the body for 2.
</div>
</div>
</form>
</body>
</html>
最佳答案
这里有一个选项:
$('div.hdr span').click(function(e){
// stops the click event bubbling/propagating beyond the span
e.stopPropagation();
// finds the previous span,
// finds the radio input in that span (if there is one)
// and checks it (though you should use the label element for this, really
$(this).prev('span').find('input:radio').prop('checked', true);
});
关于jquery - 如何使单选按钮在 JQuery UI 折叠面板中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15713397/