Question

这是JS Fiddle。我希望内容有点互动，只需点击内容即可隐藏它。如果用户希望用户将其恢复，隐藏部分将显示在右侧的<aside>部分中。我有'标题'（业务方法）工作，因为它必须保持为父DOM元素。我一直在努力让孩子们上班。我目前对孩子们的尝试是（也发布在小提琴上）：

    //individual BA elements Toggle Buttons
    //Currently on, turning Off
        $('.block > .businessapproaches > section > input').on('change', function () {
            if (this.checked) {
            } else {
                var index = $(this).prevAll('section').length;
                $('.block > .businessapproaches > section').eq(index).hide();
                $('fieldset.businessapproaches > label').eq(index+1).show();
                $('fieldset.businessapproaches > input').eq(index+1).prop('checked' , false);
                console.log("off")
                console.log("left index: " + index);
                console.log($('.block > .businessapproaches > section').eq(index));
                console.log($('fieldset.businessapproaches > label').eq(index+1));
            }
        });
    //Currently off, turning On
        $('fieldset.businessapproaches > input').on('change', function () {
            if (this.checked) {
            } else {
                var index = $(this).prevAll('section').length+1;
                $('.block > .businessapproaches > section').eq(index-1).show();
                $('.block > .businessapproaches > input').eq(index-1).prop('checked' , false);
                $('fieldset.businessapproaches > label').eq(index).hide();
                console.log("on")
                console.log("right index: " + index);
                console.log($('.block > .businessapproaches > section').eq(index-1));
                console.log($('fieldset.businessapproaches > label').eq(index));
            }
        });

很抱歉在同一个堆栈中发布2个问题，但它似乎很相关，我正在尝试快速找到125的代表，这样我就可以发布多个问题，而无需等待规定的时间）

奖励积分：可以告诉我为什么'标题'（商业方法）可以通过复选框或文本点击，而孩子不是？我的错误在哪里，因为我最终会用css隐藏'框'。

Answer 1

我尝试了小提琴http://fiddle.jshell.net/guanxiaohua2k6/dpvAn/1/。我认为它可以按你的意愿工作。

我将在下面显示修改的位置。

@@ -10 +10 @@
-                    var index = $(this).prevAll('section').length;
+                    var index = $(this).closest('section').prevAll('section').length;
@@ -13 +13 @@
-                    $('fieldset.businessapproaches > input').eq(index+1).prop('checked' ,     false);
+                    $('fieldset.businessapproaches > input').eq(index+1).prop('checked' , true);
@@ -24 +24 @@
-                    var index = $(this).prevAll('section').length+1;
+                    var index = $(this).prevAll('input').length;
@@ -26 +26 @@
-                    $('.block > .businessapproaches > input').eq(index-1).prop('checked' , false);
+                    $('.block > .businessapproaches > section > input').eq(index-1).prop('checked' , true);

至于为什么无法点击儿童的“标题”，输入的ID与＆lt; aside＆gt;中的重复。

JQuery .hide（）/。show（），复选框的.prop（）设置

1 个答案: