如何将页面上的多个 jquery 脚本合并为一个？

Question

我的页面中有八个单独的脚本，用于将 slideToggle() 行为添加到八个不同的元素。有没有办法将它整合到一个脚本中，这样它就不会严重影响页面加载时间？

<div id="proficiencies_holder">
    <div id="proficiencies_menu">
        [insert_php] 
            $args = array('category_name'=>'competencies-and-domains','posts_per_page'=> -1);
            $query = new WP_Query($args);
            $i = 0;
            while($query->have_posts()):
                $i+=1;
                $query->the_post();
                $div_image = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()),'full');
                echo '<div class="prof_menu_item_holder">';
                echo '<div id="prof_button'.$i.'"class="prof_menu_item custom-parallax"style="background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url('.$div_image[0].')">';
                echo get_the_title();
                echo '</div>';
                echo '<div id="par_tab'.$i.'">';
                echo get_the_content();
                echo '</div>';
                echo '</div>';
                echo '<script>$(document).ready(function(){$("#prof_button'.$i.'").click(function(){$("#par_tab'.$i.'").slideToggle();});});</script>';
            endwhile;
        [/insert_php]
    </div>
</div>

Answer 1

为什么不使用类？例如：prof_button 和 par_tab

$(document).ready(function(){
     $(".prof_button").click(function(){
          $(this).next('.par_tab').slideToggle();
     });
});

演示：http://codepen.io/biancamihai/pen/rVXoaW