Question

我使用jquery（v2.2.4）rsconnect和slideUp()来显示/隐藏slideDown()标记。内部<details>是3个不同内容的div：一个显示最近的帖子，另一个是最近的评论，第三个显示搜索字段。每个按钮都有一个<details>标记，它还会检查子内容div是否有效，并相应地添加或删除类。

虽然jquery可以显示和隐藏<a>，并添加和删除类，但幻灯片动画似乎仅适用于大约5个像素，然后它就会跳过＆＃34;跳跃＆＃34;打开。由于div中的内容是动态的，我无法在任何内容上设置特定的高度。

我不认为这与WordPress有任何关系，因为我已经在其他模板中使用了这个没有问题，尽管我没有多个内容区域显示和隐藏在主要内容中内容区。

我不确定这是与CSS还是jquery或两者都有关 - 猜测它是否有一些CSS冲突。我在这里检查了关于幻灯片故障的其他主题，但是在<details>和margin方面我无法看到与我的问题的关系。我认为这可能是一个padding问题，但我确实在使用伪元素的float标记上有一个明确的修复，而在<ul>的展示问题上有display:table。

建议欢迎。

HTML / PHP：

<li>

jquery的：

<div id="tips-nav" class="wrap cf" role="complementary">

    <nav class="tips-navigation">
        <ul>
            <li id="post-link"><a id="post-link-a">post</a></li>
            <li id="comment-link"><a id="comment-link-a">comment</a></li>
            <li id="search-link"><a id="search-link-a">search</a></li>
        </ul>
    </nav>
    <details id="tip-nav-content" class="wrap cf">
        <div id="post-content">
            <header>
                <h4>recent posts</h4>
            </header>
            <ul id="pc-post-ul" class="tip-nav-ul cf">
                <?php
                    $args = array(
                        'numberposts' => '5',
                        'post_type' => 'tips',
                        'offset' => '0',
                        'orderby' => 'post_date',
                        'order' => 'DESC',
                        'post_status' => 'publish'
                    );
                    $recent_posts = wp_get_recent_posts( $args );
                    foreach( $recent_posts as $recent ){
                        echo '<li><div class="tip-nav-thumb">' . get_the_post_thumbnail($recent["ID"], 'tip-nav-thumb') . '</div><p>' . get_the_title($recent["ID"]) . '</p><p>' . get_the_time('l, F j, Y', $recent["ID"]) .'</p>' . '<a class="clickBlock" href="' . get_permalink($recent["ID"]) . '"></a></li>';
                    }
                ?>
            </ul>
            <a class="kill-tn-content">close</a>
        </div>
        <div id="comment-content">
            <header>
                <h4>recent comments</h4>
            </header>
            <ul id="pc-comment-ul" class="tip-nav-ul cf">
                <?php recent_comments(); ?>
            </ul>
            <a class="kill-tn-content">close</a>
        </div>
        <div id="search-content">
            <header>
                <h4>search for stuff</h4>
            </header>
            <div class="search-bar">
                <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
                    <div><input type="text" name="s" id="s" value="Find some crap" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
                    <input type="submit" id="searchsubmit" value="g" class="btn" />
                    </div>
                </form>
            </div>
            <a class="kill-tn-content">close</a>
        </div>
    </details>

</div>

CSS：

$('#post-link-a').click(function () {
    if($('#tip-nav-content').is(':hidden')){
        if($('#post-content').hasClass('show-the-content')){
            $('#tip-nav-content').slideDown();
        }
        else {
            $('#search-content').removeClass('show-the-content');
            $('#comment-content').removeClass('show-the-content');
            $('#post-content').addClass('show-the-content');
            $('#tip-nav-content').slideDown();
        }
    }
    else if($('#tip-nav-content').is(':visible')){
        if($('#post-content').hasClass('show-the-content')){
            $('#tip-nav-content').slideUp();
        }
        else {
            $('#search-content').removeClass('show-the-content');
            $('#comment-content').removeClass('show-the-content');
            $('#post-content').addClass('show-the-content');
        }
    }
    else {
        // nada
    }
});
$('#comment-link-a').click(function () {
    if($('#tip-nav-content').is(':hidden')){
        if($('#comment-content').hasClass('show-the-content')){
            $('#tip-nav-content').slideDown();
        }
        else {
            $('#search-content').removeClass('show-the-content');
            $('#post-content').removeClass('show-the-content');
            $('#comment-content').addClass('show-the-content');
            $('#tip-nav-content').slideDown();
        }
    }
    else if($('#tip-nav-content').is(':visible')){
        if($('#comment-content').hasClass('show-the-content')){
            $('#tip-nav-content').slideUp();
        }
        else {
            $('#search-content').removeClass('show-the-content');
            $('#post-content').removeClass('show-the-content');
            $('#comment-content').addClass('show-the-content');
        }
    }
    else {
        // nada
    }
});
$('#search-link-a').click(function () {
    if($('#tip-nav-content').is(':hidden')){
        if($('#search-content').hasClass('show-the-content')){
            $('#tip-nav-content').slideDown();
        }
        else {
            $('#post-content').removeClass('show-the-content');
            $('#comment-content').removeClass('show-the-content');
            $('#search-content').addClass('show-the-content');
            $('#tip-nav-content').slideDown();
        }
    }
    else if($('#tip-nav-content').is(':visible')){
        if($('#search-content').hasClass('show-the-content')){
            $('#tip-nav-content').slideUp();
        }
        else {
            $('#post-content').removeClass('show-the-content');
            $('#comment-content').removeClass('show-the-content');
            $('#search-content').addClass('show-the-content');
        }
    }
    else {
        // nada
    }
});
$('.kill-tn-content').click(function () {
    $('#tip-nav-content').slideUp();
});

Answer 1

我发现了这个问题所以如果有其他人遇到这个问题，我会发布它。

内容div有一些旧的CSS来自测试我交换类Qith Jquery并使用CSS转换。这不行，所以我开始使用slideUp()和slideDown()。一旦我添加了似乎导致故障的jquery，我忘了删除那些转换。一旦我删除了CSS过渡，就没有更多的跳跃，现在一切都很顺利。

Jquery slideUp（）slideDown（）跳转故障，WordPress

1 个答案: