一页上有 3 个折叠面板,每个折叠面板内有 4-5 个单选按钮。所有人都有相同的名字组。在初始化时,第一个 Accordion 的第一个 radio 已被选择。
通过按选项卡选择单选按钮时,第二个 Accordion 将打开。但按下下一个选项卡时,它会跳过单选按钮并移至下一个 Accordion 。
这是因为用户只能选择一个具有相同名称的选项。
我想要的是第二个选项应该可以通过选项卡选择,但名称属性应该保持不变。这就是条件——无法更改,因为它有很多依赖项。我们怎样才能实现这一目标?
我向 radio 添加了 tabindex 值,但没有用。
最佳答案
编辑:来尝试一下!
这将识别 Accordion 是否具有可选项输入,不仅如此,如果通过选项卡进行切换且其未打开但仍具有可选项输入,它还会为您打开 Accordion ,您不希望用户错过输入值(value)观成。
我希望我能够指导您正确的方向。
$('button').keydown(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
var visibleAccordionInputs = $(this.nextElementSibling).find($(`input[type][tabindex != '-1']:visible`));
var hiddenAccordionInputs = $(this.nextElementSibling).find($(`input[type][tabindex != '-1']:hidden`));
if (hiddenAccordionInputs.length) {
alert('pressed tab on an accordian with tabbable inputs that are not visible, lets open the accordion.');
$(this.nextElementSibling).show();
}
if (visibleAccordionInputs.length) {
alert('pressed tab on an accordian with visible tabbable inputs')
visibleAccordionInputs[0].focus();
}
}
});
function toggleAccordion(elem) {
var accordionContent = $(elem.nextElementSibling);
accordionContent.toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">
<h2>Accordions</h2>
<p>An accordion is used to show (and hide) HTML content:</p>
<button class="w3-btn w3-block w3-black w3-left-align" onClick="toggleAccordion(this)">Open Section 1</button>
<div class="w3-container">
<h4>Section 1</h4>
<p>Some text..</p>
</div>
<button class="w3-btn w3-block w3-black w3-left-align" onClick="toggleAccordion(this)">Open Section 2</button>
<div class="w3-container">
<h4>Section 2</h4>
<p>Some text..</p>
<div class="w3-row">
<div class="w3-half">
<input id="milk" class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>
<br>
<input id="sugar" class="w3-check" type="checkbox">
<label>Sugar</label>
<br>
<input id="lemon" class="w3-check" type="checkbox" disabled="">
<label>Lemon (Disabled)</label>
<br><br>
</div>
<div class="w3-half">
<input id="male" class="w3-radio" type="radio" name="gender" value="male" checked="">
<label>Male</label>
<br>
<input id="female" class="w3-radio" type="radio" name="gender" value="female">
<label>Female</label>
<br>
<input id="unknown" class="w3-radio" type="radio" name="gender" value="" disabled="">
<label>Don't know (Disabled)</label>
</div>
</div>
</div>
</div>
关于javascript - 通过选项卡选择单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56251684/