javascript - 交换后 radio 相互重叠

Question

事件处理程序有问题，鼠标离开时 div 打开和关闭 3 次。

还有被交换的 radio 会过度铺设或偏移。

我已经尝试了所有方法，我认为这与我使用 event.preventDefault() 的方式有关；

更新__

菜单打开 3 倍已修复，但 div 中交换的 radio 仍然与任何想法重叠？

http://www.apecharmony.co.uk

// RADIO BUTTON
$("input[name='domain_ext']").each(function () {
    $("#domaindropradio1").attr('checked', 'checked');
    var lbl = $(this).parent("label").text();
    if ($(this).prop('checked')) {
        $(this).hide();
        $(this).after("<div class='radioButtonOn'>" + lbl + "</div>");
    } else {
        $(this).hide();
        $(this).after("<div class='radioButtonOff'>" + lbl + "</div>");
    }
});

$("input[type=radio]").change(function () {
    $(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
});

// RIBBON RADIO DROPBOX
$('div.ribbonBoxarrow').click(function () {
    $('.ribbonBoxarrow li').show('medium');
});
$('.ribbonBoxarrow li').mouseleave(function () {
    $(this).hide('slow');
});
$("input[name='domain_ext']").parent('label').click(function () {
    $('.ribbonBoxarrow li').hide('slow');
    event.preventDefault();
});

//SWAP SECECTED RADIO
$("div.radiogroup2").on("click", ":radio", function () {
    var l = $(this).closest('label');
    var r = $('#radioselected');
    r.removeAttr('id');
    l.before(r.closest('label'));
    $(this).attr('id', 'radioselected');
    l.prependTo('.radiogroup1');
});

Answer 1

回应:

the div opens and closes 3 times.

您的动画触发的事件比您希望的要多。此外，您的 preventDefault() 不会阻止触发其他点击事件。

对于您的 $("input[name='domain_ext']").parent('label') 点击事件，试试这个:

$("input[name='domain_ext']").parent('label').click(function () {
  $('.ribbonBoxarrow li').mouseleave();
  event.stopImmediatePropagation();
});

对于你的第二期:

also the radio that is swapped get over layed or offset.

看起来您正在将单选按钮添加到具有 radiogroup1 类的元素，但您可能希望单选按钮位于嵌套的表格元素中。