javascript - jQuery .click() 没有按预期触发

Question

我想要实现的是：

• 用户在 .question div 中单击 h4
• .question div 扩展为 90px，它的子段落通过将其 margin-top 设置为 0 滑入视图
• 当用户第二次单击 h4 元素时，.question div 应返回 35px 高度，并且段落应将 margin-top 设置为 35px。

这是一个小提琴

jQuery(document).ready(function($) {
    $('.question h4').click(function () {
        $(this).parents('.question').css('height', '90');
        $(this).siblings('p').css('margin-top', '0');
        $(this).parent().addClass('open');
    });

    $('.question.open h4').click(function () {
        $(this).parent.removeClass('open');
        $(this).parents('.question').css('height', '65px');
        $(this).siblings('p').css('margin-top', '35px');
    });
});

Answer 1

即使.questionis ，您的第一个单击处理程序也会触发.open。您需要.open从第一个选择器中排除。

$('.question:not(.open) h4').click(...

Answer 2

正如 Pointy 提到的，您只需要 1 个带有条件语句的处理程序。此外，为了速度、开销和简单性，我会考虑将节点上的所有所需操作串成一行（即，你想用 $(this).parent() 做的任何事情都应该串在一起，所以 jQuery 只需要解析 DOM 一次）。

$('.question h4').click(function () {
    if (!$(this).parent().hasClass('open')){
        $(this).parents('.question').css('height', '90').addClass('open');
        $(this).siblings('p').css('margin-top','0');
    }else{
        //$(this).parents('.question').css('height', '65px');
        $(this).parent().css('height', '65px').removeClass('open');
        $(this).siblings('p').css('margin-top', '35px');
    }
});

Answer 3

你真的只需要一个处理程序：

$('.question h4').click(function () {
    if ($(this).is('.open h4')) {
        $(this).parent.removeClass('open');
        $(this).parents('.question').css('height', '65px');
        $(this).siblings('p').css('margin-top', '35px');
    }
    else {
        $(this).parents('.question').css('height', '90');
        $(this).siblings('p').css('margin-top', '0');
        $(this).parent().addClass('open');
    }
});

您的第二个处理程序分配什么都不做，因为您的任何<h4>元素都没有以“开放”类开始（或者，至少，我怀疑他们没有）。