javascript - 显示/隐藏隐藏的 div 并更改 css

Question

我需要在点击 .innerodds-view 时调用一个函数来显示:block #prop-bet-view(这应该是默认的 display:none;) + 更改 innerodds-view::before 的 css。

<div class="prop-bet-click">
  <a href="#" class="innerodds-view">CLICK HERE TO VIEW PROP BETS</a>


    <div id="prop-bet-view">

                <?php if( have_rows('prop-bet-view') ): ?>
                    <?php while ( have_rows('prop-bet-view') ) : the_row(); ?>


                        <ul class="prop-bet-block">
                            <li class="prop-bet-title">
                            <div class="prop-bet-text"><?php the_sub_field('prop_bet_text'); ?></div>
                           </li>

                            <li class="prop-odds">
                             <div class="prop-odds-title"><?php the_field('prop-odds-title'); ?></div>
<div class="prop-odds-nr"><a href="<?php the_sub_field('prop_odds_url'); ?>"><?php the_sub_field('prop_odds_nr'); ?></a></div>
                            </li>
                            <li class="prop-bet-at-block">
                               <div class="prop-bet-at">  <?php the_field('prop_bet_at'); ?> </div>
 <div class="prop-img"><a href="<?php the_sub_field('prop_img_url'); ?>">  <img src="<?php the_sub_field('prop_img'); ?>" alt="" style="max-width: 47px;" /> </a></div>


                            </li>

                        </ul>

                    <?php endwhile; ?>
                <?php endif; ?>

                </div>

        </div>

Answer 1

DEMO HERE

首先设置它的CSS:

#prop-bet-view
{
    display:none;
}

然后是 JS

$('.innerodds-view').on('click',function(){
      $("#prop-bet-view").toggle();
});

如果你想添加一些动画你可以这样做:

$("#prop-bet-view").toggle('slow');