Jquery 选择元素下一个/上一个/最近

Jquery selecting elements next/prev/closest

本文关键字：上一个 最近 下一个 选择 元素 Jquery      更新时间：2023-09-26

嗨，我有这个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>

所以我想添加一些类和幻灯片在单击时切换，但我无法选择正确的元素。

这是我的尝试。

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

这里唯一有效的是将突出显示类添加到 .successdiv，其余两个函数不起作用。我在这里做错了什么？

如果要选择同一级别的元素，请使用.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" );
    });
相关文章：