Question

以下代码是指您点击某个div。隐藏项目将显示并将css更改为显示块。我有多个菜单或选项，当你点击一个certein div时，我想要做的是什么。然后你点击另一个。 第一个自动关闭这是div的指示符<?php the_title(); ?>或ID。

HTML

    <a id="mylink" class="career-en blue" href="javascript:showhide('<?php the_title(); ?>')">

                <div class="Career-entry" >

                    <div class="row" >
                        <div class="col-md-5ths col-sm-6  col-xs-12">
                         <?php the_field( 'position' ); ?>

                        </div>

                        <div class="col-md-5ths col-sm-6  col-xs-12">
                         <?php the_field( 'brandsubsidiary' ); ?>
                        </div>

                        <div class="col-md-5ths col-sm-6  col-xs-12">
                         <?php the_field( 'work_location' ); ?>
                        </div>

                        <div class="col-md-5ths col-sm-6  col-xs-12">
                         <?php the_field( 'date_posted' ); ?>
                        </div>


                        <div class="col-md-5ths col-sm-6  col-xs-12">
                         <?php the_field( 'aplication_dead_line_' ); ?>
                        </div>
                    </div>

                </div>
                </a>



          <div class="career-content" id="<?php the_title(); ?>" style="display:none;">
                 <div class="row">
                    <div class="col-md-6">
                    <h6> <i> Position Summary: </i></h6>

                     <?php the_field( 'position_summary' ); ?>

                    </div>
                        <div class="col-md-6">
                         <h6> <i> Requirments: </i></h6>


                               <?php  if( have_rows('requirments') ):?>

                                    <?php    while ( have_rows('requirments') ) : the_row(); ?>

                                        <p class="reqs"> - <?php the_sub_field('para'); ?> </p>

                                      <?php  endwhile; else : ?>

                                <?php endif;  ?>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                        <h6> <i>Major Duties & Responsibilities: </i></h6>

                         <?php  if( have_rows('major') ):?>

                                    <?php    while ( have_rows('major') ) : the_row(); ?>

                                            <p class="reqs"> - <?php the_sub_field('para'); ?> </p>

                                          <?php  endwhile; else : ?>

                                    <?php endif;  ?>  

                        </div>
                        <div class="col-md-6">
                        <h6> <i> Submit yoru resume: </i></h6>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


                            <div class="col-md-7 col-sm-12">
<?php echo do_shortcode( '[contact-form-7 id="112" title="Career"]' ); ?>

                            </div>

                        </div>

                    </div>
                </div>



               <hr class="career-hr"> 
    <?php if ($x == 2) { echo '<div class="blog_box clear"></div>'; $x = -1; } $x++; ?>
                <?php endwhile; ?>
            </div>

Css

.red{
    background-color: #e7f2ca;
    display: block;
}

JS

         <script>
         function showhide(id) {
            var e = document.getElementById(id);
            e.style.display = (e.style.display == 'block') ? 'none' : 'block';
         } 
        </script>
        <script> 
        $('a#mylink').click(function() {
            $(this).toggleClass('red blue');
        });
        </script>

Answer 1

添加课程ex。＆＃39;自动隐藏＆＃39;对于你想要自动隐藏的所有div。然后：

import java.time.Month;

Month exemple = new Month.of(12);
//---return a Month object with value of December---

String month = exemple.toString();
//---if you want to convert Month to String---

Answer 2

稍微调整一下你的代码，只需使用一个变量来跟踪当前打开的部分。

var current_open_section;

function showhide(id){

   //hide open section first
   if(current_open_section){
       current_open_section.style.display = 'none';
   }
   //let the selected section be current open section
   current_open_section = document.getElementById(id);

  //show current open section
  current_open_section.style.display = 'block';

}

单击其他链接时自动重置

2 个答案: