Question

嗨，我有这个HTML，我想在用户点击h4时添加一些动作。

<div class="row success">
<div class="col-sm-4 no-pad-r img-toggle">
    <?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6 col-sm-offset-1 no-pad-l">
    <h4 class="heading-toggle"><?php the_title(); ?></h4>

    <div class="line"></div>
    <p class="intro">"<?php the_field('first_line'); ?>."</p>

    <div class="toggle-content" style="display: none">
        <div class="main-copy"> <?php the_content(); ?></div>
        <h5><?php the_field('author_name'); ?></h5>

        <p class="position"><?php the_field('author_position'); ?></p>
    </div>
    <button class="btn toggle btn-danger"></button>
</div>

所以我想在点击时添加一些类和slideToggle，但我无法选择合适的元素。

这是我的尝试。

$( ".heading-toggle" ).click(function() {
    $(this).next( ".toggle-content" ).slideToggle();
    $(this).closest( ".success" ).toggleClass( "highlight" );
    $(this).closest( ".toggle" ).toggleClass( "open" );
    });

唯一可行的方法是在.success div中添加高亮类，其余两个函数不起作用。我在这做错了什么？

Answer 1

如果要在同一级别选择元素，请使用.siblings方法 http://api.jquery.com/siblings/

所以你的代码看起来像这样

$( ".heading-toggle" ).click(function() {
    $(this).siblings( ".toggle-content" ).slideToggle();
    $(this).closest( ".success" ).toggleClass( "highlight" );
    $(this).siblings('.btn').toggleClass( "open" );
    });

Jquery选择元素next / prev / nearest

1 个答案: