javascript - 在新页面中打开隐藏的内容/框

我已经从页面Neue Welt Reisen的底部到我们的glossary page设置了一个链接（Encomienda-System）。

该链接应直接跳至字母“ E”下的条目“ Encomienda”。

默认情况下，词汇表中的所有条目均为“隐藏”，除了属于字母“ A”的条目。

如您所见，此刻链接跳转到字母“ A”下方的条目，而不是字母“ E”下方的“ Encomienda”。

我认为问题在于，除“ A”外所有字母都被隐藏了。我该如何解决这个问题。

谢谢。这是page-glossary.php的完整代码：

<?php

get_header（）;
？>

<div class="breadcrumbs-container">
    <div class="breadcrumbs-box">
        <div class="breadcrumbs-line">
            <?php if( !is_front_page() && !is_404() && function_exists( 'breadcrumbs' ) ) : breadcrumbs( $defaults = array( 'show_current_item' => false ) ); endif; ?>
        </div>
        <div class="page-title"><?php the_title(); ?></div>
    </div>
</div>
<div class="continent-content-container glossary-page az-page" id="content" role="main">
    <div id="content-area" class="content-inner container-with-sidebar glossary-content-inner">

        <?php
        $args_main = array(
            'post_type' => 'glossar',
            'posts_per_page' => -1,
            'post_parent' => 0,
            'orderby' => 'title',
            'order' => 'ASC'
        );
        $glossary_letters_list = new WP_Query( $args_main );
        ?>

        <?php if ( $glossary_letters_list->have_posts() ) : ?>

            <div class="letters-module">

                <?php while ( $glossary_letters_list->have_posts() ) : $glossary_letters_list->the_post(); ?>

                    <div class="single-letter letter-parent-<?php print $post->ID; ?>" data-id="<?php print $post->ID; ?>">
                        <a href="#<?php print the_title(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </div>

                <?php endwhile; ?>

            </div>

            <?php wp_reset_postdata(); ?>

        <?php endif; ?>

        <?php
        $args = array(
            'post_type' => 'glossar',
            'posts_per_page' => -1,
            'post_parent' => 0,
            'orderby' => 'title',
            'order' => 'ASC'
        );
        $glossar_child = null;
        $glossar_child = new WP_Query( $args );
        ?>

        <?php if ( $glossar_child->have_posts() ) : ?>
            <?php while ( $glossar_child->have_posts() ) : $glossar_child->the_post();
            $glossar_post_id = get_post();
            $glossar_child_args = array(
                'post_type' => 'glossar',
                'orderby' => 'title',
                'order' => 'ASC',
                'showposts' => -1,
                'post_parent' => $glossar_post_id->ID
            );
            $glossar_child_query = new WP_Query($glossar_child_args);
            ?>

                <?php if( $glossar_child_query->have_posts() ) { ?>
                    <?php while ($glossar_child_query->have_posts()) : $glossar_child_query->the_post(); ?>

                    <div class="<?php the_title(); ?> letter-container letter-parent-<?php print $glossar_post_id->ID; ?>" data-id="<?php print $glossar_post_id->ID; ?>">
                        <div id="glossary-letter-post-<?php print the_ID(); ?>" class="header-letter">
                            <?php the_title(); ?>
                        </div>
                        <div class="letter-content">
                            <?php the_content(); ?>
                        </div>
                        <div class="back-to-top">
                            <p><?php _e('nach oben', 'NeueWeltRisen') ?></p>
                        </div>
                    </div>

                    <?php endwhile; } ?>
                <?php endwhile; ?>

            <?php wp_reset_postdata(); ?>

        <?php endif; ?>

    </div>
    <div class="sidebar-container">
        <?php get_sidebar('other'); ?>
    </div>
    <div class="clear"></div>
</div>
<script>
    jQuery( document ).ready(function(e) {
        $ = jQuery;
        $('.back-to-top').click(function() {
            $('html, body').animate({
                scrollTop: $('.glossary-page').offset().top
            }, 2000);
        });
        var firstLetterActive = $('.letters-module .single-letter').eq(0).addClass('current-letter');
        var firstLetterActiveID = firstLetterActive.data( 'id' );
        var boxesActive = $('.glossary-content-inner .letter-container');
        var boxesID = $('.glossary-content-inner .letter-container').data( 'id' );
        if( firstLetterActiveID = boxesID ){
            boxesActive.filter('[data-id="'+boxesID+'"]').addClass('show-box');
        }
        $(".letter-container").hide();
        $(".show-box").show();
        $('.glossary-content-inner .letters-module .single-letter').click(function() {
            var currEl = $('.letters-module').find('.single-letter.current-letter');
            var dataID = $( this ).data( 'id' );
            if(!$(this).hasClass('current-letter')){
                $(this).addClass('current-letter').siblings().removeClass('current-letter');
            }
            var currentSelectLetterID = $('.single-letter.current-letter').data( 'id' );
            var currentSelectBoxID = $('.glossary-content-inner').find('.letter-container.show-box').data( 'id' );
            if( currentSelectLetterID != currentSelectBoxID ){
                $('.glossary-content-inner').find('.letter-container.show-box').removeClass('show-box').addClass('no-box');
                $('.letter-container').hide();
            }
    var disabledSelectBoxID = $('.glossary-content-inner').find('.letter-container.no-box').data( 'id' );
            if( currentSelectLetterID = disabledSelectBoxID ){
                $('.glossary-content-inner .letter-container').filter('[data-id="'+dataID+'"]').removeClass('no-box').addClass('show-box');
                $('.letter-container.show-box').show();
            }
        });

  var clickAnchor = $('.letter-container a');
  clickAnchor.click(function() {
    var letterID = $(this).attr('href').replace('#', '.');
    var searchID = $('#content-area').find(letterID).data('id');

    var currentSelectBoxID = $('.glossary-content-inner').find('.letter-container.show-box').data( 'id' );
    if( searchID != currentSelectBoxID ){
      $('.glossary-content-inner').find('.letter-container.show-box').removeClass('show-box').addClass('no-box');
                $('.letter-container').hide();
            }
    $('.glossary-content-inner .letter-container').filter('[data-id="'+searchID+'"]').removeClass('no-box').addClass('show-box');
    $('.letter-container.show-box').show();

    var currentLetter = $('.letters-module .single-letter');
    var currentLetterID = $('.letters-module .single-letter').filter('[data-id="'+searchID+'"]').data( 'id' );
    currentLetter.removeClass('current-letter');
    if( searchID = currentLetterID ){
      currentLetter.filter('[data-id="'+searchID+'"]').addClass('current-letter');
      var container = $("html,body");
      var scrollTo = $(letterID);
      container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top,
        scrollLeft: 0
      },300)
            }
  })
    });
</script>

最佳答案

您的ID不能以数字开头，也不能包含空格。在您的链接和ID中更改此设置，一切正常。