1

这是JS 小提琴。我希望内容有点互动，只需单击内容即可隐藏它。为了允许用户在他/她愿意的情况下将其带回，隐藏的部分出现在<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 隐藏“框”。

4

1 回答 1

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 与 <aside> 中的 id 重复。

于 2012-06-19T02:34:58.950 回答