0

当用户选择单选选项时，我正在使用 jquery 显示/隐藏更多信息。这是一个简单的概念——当用户在<dt> 标记内单击（即，他们单击<input> 或<label>）时，​​<dd> 滑动并保持打开状态以显示更多信息。在 <dt> 标记内再次单击会关闭 <dd>。

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

如果单击 radio ，幻灯片可以正常打开并保持打开状态，但单击标签区域，幻灯片会打开并立即弹回关闭。在尝试调试时，我发现如果我更改或删除 for= 以不匹配单选按钮的正确 ID（例如，< input type="radio" id="option01" > < label 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。尝试单击标签以查看问题。它会立即打开和关闭。

4

1 回答 1

1

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

看到这个答案：jQuery Click fires two when click on label

现在，考虑到这一点，我们必须做出决定......我能让它正常工作的唯一方法是将点击事件绑定到输入字段，而不是 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();
    }
});
于 2013-02-01T17:01:54.787 回答