jQuery slideDown 和 slideUp 奇怪的行为

Question

我写的一些 jQuery 有一个小问题。 我有两个按钮，它们下面都有一个隐藏的 div。单击按钮时，相应的 div 会使用 slideDown 或 slideUp 动画进入或退出视图。 我遇到的问题是，当调用 slideUp（隐藏 div）时，它也隐藏了按钮。这是不正确的，因为按钮需要保持原位，并且只有包含表格的 div 需要进行动画处理。

我在下面创建了一个 jFiddle 来更好地解释我的意思：

http://jsfiddle.net/nH5N7/

这是我的代码：

HTML：

<div id="rightContent"> 
            <div class="" id="yourAssessments">
                <h3>Your Assessments</h3>
                <div class="innerPadding">      
                    <h4>Please choose an assessment: </h4>          

                        <div class="onlineModuleAssessmentWrapper">
                            <div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
                            <div data-assessment-id="1" class="assessmentTableWrap">
                                <table>

                                        <tr>
                                            <td>
                                                Planning                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Doing It                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Learning and Communication Styles/Techniques                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Debrief                                             </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>
                                                                        </table>
                            </div>
                        </div>

                        <div class="onlineModuleAssessmentWrapper">
                            <div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
                            <div data-assessment-id="3" class="assessmentTableWrap">
                                <table>

                                        <tr>
                                            <td>
                                                Planning                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Doing It                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Learning and Communication Styles/Techniques                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Debrief                                             </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>
                                                                        </table>
                            </div>
                        </div>

                </div>
            </div>

jQuery：

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id");
    if (jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow");
    } else {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");
    }
});

任何人都可以看到为什么会发生这种情况或我哪里出错了吗？ 谢谢！！

Answer 1

您的容器和“按钮”中有相同的 data-assessment-id，因此 jquery 会隐藏两者。检查这个：http://jsfiddle.net/nH5N7/4/

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function() {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
    linkedAssessmentId++
    console.log(linkedAssessmentId)

    if(jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow"); 
    } else {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");   
    }

});

html:

<div id="rightContent"> 
                <div class="" id="yourAssessments">
                    <h3>Your Assessments</h3>
                    <div class="innerPadding">      
                        <h4>Please choose an assessment: </h4>          

                            <div class="onlineModuleAssessmentWrapper">
                                <div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
                                <div data-assessment-id="2" class="assessmentTableWrap">
                                    <table>

                                            <tr>
                                                <td>
                                                    Planning                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Doing It                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Learning and Communication Styles/Techniques                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Debrief                                             </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>
                                                                            </table>
                                </div>
                            </div>

                            <div class="onlineModuleAssessmentWrapper">
                                <div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
                                <div data-assessment-id="4" class="assessmentTableWrap">
                                    <table>

                                            <tr>
                                                <td>
                                                    Planning                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Doing It                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Learning and Communication Styles/Techniques                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Debrief                                             </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>
                                                                            </table>
                                </div>
                            </div>

                    </div>
                </div>

Answer 2

当您运行“隐藏”代码时，您在按钮上运行它，而不是之后的 div。

小提琴更新：http://jsfiddle.net/nH5N7/6/

jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next().slideUp("slow");

更改了上面的行，添加了“.next()”...

Answer 3

首先，确保您的 ID 是唯一的（也许您甚至可以去掉所有 ID）。然后，这应该可以完成工作：

jQuery(".assessmentTableWrap").hide();

jQuery(document).on("click", ".assessmentButton", function () {
    jQuery(this).next(".assessmentTableWrap").slideToggle();    
});

演示：http://jsfiddle.net/nH5N7/7/

Answer 4

我建议您将代码更改为：

jQuery(".assessmentTableWrap").hide();

jQuery("#yourAssessments").on("click", ".assessmentButton", function () {
    $(this).closest(".onlineModuleAssessmentWrapper")
        .find(".assessmentTableWrap")
        .slideToggle();
});

这将获取包含当前单击按钮的父包装器，然后在该公共容器中找到.assessmentTableWrap，然后切换它的滑动状态。您不必将所有这些 data-assessment-id 属性放在 HTML 中即可执行此操作。使用公共父级而不是仅使用 .next() 可以减少代码对您的确切 HTML 的依赖（例如，如果在某处插入另一个 div，将来不太可能中断）。

此代码还为委派事件处理选择了更有效的父级（最好不要将它们全部放在document）。

Answer 5

以上所有答案都是正确的。

如果您需要使用“linkedAssessmentId”进行捕获，另一种可能对您有帮助的方法

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
    jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next(".assessmentTableWrap").slideToggle();    
});

或

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
   $(this).next("div[data-assessment-id=" + linkedAssessmentId + "]").slideToggle();    
});