Question

在我的项目中使用Html和Jquery 项目演示jsfiddle here

我的HTML页面中有<ul> radio buttons，如下所示

HTML代码

<ul class="featureBoxes paddingRight">
    <li class="featuresHeading features liListTo">
        <input type="radio"  id="selectProvider" class="rd" name="rdbToList" value="1" />
        <label for="selectProvider">
            Radio 1
        </label>
    </li>
    <li>
        <ul class="featureListings ">
            <li>
                data 1
            </li>
        </ul>
    </li>`
    <li class="featuresHeading options liListTo">
        <input type="radio"  id="selectPatient" class="rd" name="rdbToList"
            value="2" />
        <label for="selectPatient">
            Radio 2
        </label>
    </li>
    <li>
        <ul class="featureListings">
            <li>
                <div id="sptDiv" style="padding: 2px 0px 2px 8px;">
                    Data 2
                </div>
            </li>
        </ul>
    </li>
    <li class="featuresHeading curtain-options liListTo">
        <input type="radio"  id="directEmail" class="rd" name="rdbToList"
            value="3">
        <label for="directEmail">
            Radio 3
        </label>
    </li>
    <li>
        <ul class="featureListings ">
            <li>
                Data 2
            </li>
        </ul>
    </li>
</ul>

我正在使用Jquery来slideup和slide down。 问题：当我点击单选按钮时，将slidedown标记为slideup几秒钟，再次点击$(function () { $("ul.featureListings").hide(); $(".featuresHeading").click(function (event) { $(this).find('.rd').attr('checked', 'checked'); if ($(this).find('.rd').is(':checked')) { $('ul.featureListings.demo').slideUp(300); $(this).find('.rd').attr('checked', 'checked'); $('ul.featureListings.demo').not($(this).next().find('ul.featureListings')).removeClass("demo"); if ($(this).next().find('ul.featureListings').hasClass("demo")) { $(this).next().find('ul.featureListings').removeClass("demo"); $(this).next().find('ul.featureListings').slideUp(300); } else { $(this).next().find('ul.featureListings').addClass("demo"); $(this).next().find('ul.featureListings').slideDown(300); } } //event.preventDefault(); return true; }); });，就像上面的小提琴一样。

的JavaScript

<ul>

请告诉我如何防止radio buttons和{{1}}上的点击事件？

JSFiddle here

Answer 1

试

$("ul.featureListings").hide();
$(".featuresHeading [type=radio]").click(function (e) {

    $("ul.featureListings").slideUp();
    $(this).parent().next("li").find("ul").stop().slideDown(300);

});

注意：将点击事件更改为radio button而不是容器。如果您在容器上绑定click事件使用带有单选按钮的call two times时单击事件label for： example 。单击名称时单击

DEMO

Answer 2

使用.prop('checked', true)代替.attr('checked', 'checked')，不要处理＆＃34;点击＆＃34;来自<label>的活动。 Example

$(function () {
                $("ul.featureListings").hide();
                $(".featuresHeading").click(function (event) {
                    if (event.target !== this && !$(event.target).is('input')) {
                        return;
                    }
                    $(this).find('.rd').prop('checked', true);
                    if ($(this).find('.rd').is(':checked')) {
                        $('ul.featureListings.demo').slideUp(300);
                        $(this).find('.rd').prop('checked', true);
                        $('ul.featureListings.demo').not($(this).next().find('ul.featureListings')).removeClass("demo");
                        if ($(this).next().find('ul.featureListings').hasClass("demo")) {
                            $(this).next().find('ul.featureListings').removeClass("demo");
                            $(this).next().find('ul.featureListings').slideUp(300);
                        }
                        else {
                            $(this).next().find('ul.featureListings').addClass("demo");
                            $(this).next().find('ul.featureListings').slideDown(300);
                        }
                    }
                });
            });

如何防止Jquery点击事件？

2 个答案:

DEMO