0

有人可以告诉我我是不是疯了或者我哪里出错了。我已经在多个浏览器上试过这个，当你做 show() 时它会冻结 jQuery。

我想不通，我尝试了多种扭曲代码的方法，无论如何，当调用 .show() 时，它会冻结并且在重新加载页面之前无法工作。

目的是显示几个不同的选项，如果用户点击它是一个付费选项，它会显示所需的附加信息。疯狂的是，当您删除大部分 li 时，它可以正常工作。但是，当您将 li 添加回页面时，它不起作用。它适用于 2 或 3 次点击然后冻结。Firebug 没有显示任何错误，只是不做任何事情。Interestingly, jquery on the rest of the page still works, when the option part is frozen. 我将不胜感激任何建设性的想法。谢谢！

不工作 joopk.com/signup 工作////////////////////////////////// //////

$(document).ready(function () {
   $("#signupoptions .signupoption").click(clickedoption);
});
function clickedoption() {
  if ($(this).hasClass("payoption")) {
    $("#signupadditionalinfo").show();
  }else {
    $("#signupadditionalinfo").hide();
  }
   $("#signupoptions .signupoption").removeClass("optionselected");
   $(this).addClass("optionselected");
}

为简洁起见，我已经取出了详细信息，但一般的html如下：

 <div id="signupoptions">
                            <div id="signupoptiondescription">
                                <ul>
                                    <li>Joopk.com CMS</li>
                                </ul>
                            </div>
                            <div id="signupoptionsocial" class="signupoption optionselected">
                                <h3>
                                    Social</h3>
                                <ul>
                                    <li class="check"></li>
                                </ul>
                            </div>
                            <div id="signupoptionbusiness" class="signupoption payoption">
                                <h3>
                                    Business</h3>
                                <ul>
                                    <li class="check"></li>
                                </ul>
                            </div>
                            <div id="signupoptiondeveloper" class="signupoption payoption">
                                <h3>
                                    Developer</h3>
                                <ul>
                                    <li class="check"></li>
                                </ul>
                            </div>
                            <div class="clear">
                            </div>
                        </div>
                        <div id="signupadditionalinfo" class="container" style="display: none;">
                            <h3>
                                Additional Information</h3>

                        </div>
4

1 回答 1

1

点击逻辑关闭...请看我的小提琴：http: //jsfiddle.net/sablefoste/3JMA9/1/

基本上，看一下jQuery：

$(document).ready(function () {
    $("#signupoptions .signupoption").click(function(){
        clickedoption($(this).attr('class'));
    });
});

function clickedoption(myclass) {
    if (myclass.indexOf("payoption") !== -1) {
        $("#signupadditionalinfo").show();
    } else {
        $("#signupadditionalinfo").hide();
    }
    $("#signupoptions .signupoption").removeClass("optionselected");
    $(this).addClass("optionselected");
}

CSS 可以帮助您了解正在发生的事情。

于 2013-09-17T20:41:34.553 回答