单选按钮 - 我已经搜索了许多关于使用 jquery ：visible 的帖子，看看当涉及 <标签 = " " >时是否有人遇到冲突

Question

当用户选择单选选项时，我正在使用jquery显示/隐藏更多信息。这是一个简单的概念 - 当用户在

标签内单击时（即，他们单击<输入>或<标签>），

幻灯片并保持打开状态以显示更多信息。再次在

标记内单击将关闭

。

我过去曾成功使用此显示/隐藏脚本，但从未包含输入或标签标签。通过添加带有for=参数的标签，我遇到了问题：

如果单击单选按钮，幻灯片可以正常打开并保持打开状态，但单击标签区域，幻灯片将打开并立即弹跳关闭。在尝试调试时，我发现如果我更改或删除 for= 以不匹配单选按钮的正确 id（例如，<输入类型 id="option01"><标签 for=">），幻灯片将不再反弹打开到关闭，但唉，那么我会通过删除 for= 来牺牲可访问性。

关于保持这种结构或接近它，而不是处理反弹关闭效应的任何想法？

$(document).ready(function() {
   $('.serviceOption').find('dd').hide().end().find('dt').click(function() {
    var moreInfo = $(this).next();
    if (moreInfo.is(':visible')) {
        moreInfo.slideUp();
    } else {
        moreInfo.slideDown('slow');
    }
   });
});
<dl class="serviceOption">  
    <dt>
        <input type="radio" name="serviceOptions" id="option01" value="value01">
        <label for="option01">Option 1</label>
    </dt>  
    <dd>Show more information on Option 1</dd>
    <dt>
        <input type="radio" name="serviceOptions" id="option02" value="value02">
        <label for="option02">Option 2</label>
    </dt>
    <dd>Show more information on Option 2</dd>
</dl>

这里有一个例子jsFiddle....

http://jsfiddle.net/8JjvT/

单击单选按钮可正确打开和关闭dd。 尝试单击标签以查看问题。 它会立即打开和关闭。

Answer 1

好的，我站正了：显然，带有 for= 的标签确实存在点击事件的问题！

看到这个答案： jQuery 点击在点击标签时触发两次

现在，考虑到这一点，我们必须做出决定......我能让它正常工作的唯一方法是将 Click 事件绑定到输入字段，而不是 DT。

这是我的小提琴：http://jsfiddle.net/mori57/X9pNY/

// get all the input items from the dt's
var terms = $(".serviceOption dt input");
// attach a click handler, pass in the event
terms.click(function (evt) {
    // store the clicked item's closest dt
    var clickedDT = $(this).closest("dt");
    // if there are visible dd's
    if ($("dd:visible").length > 0) {
        // hide them
        $("dd:visible").slideUp(400, function () {
            // May not need to put this inside the callback, 
            // now that I know it was label's fault
            $(clickedDT).next("dd").slideDown();
        });
    } else {
        // otherwise, just show the nearest dd
        $(clickedDT).next("dd").slideDown();
    }
});