Jquery slideUp() slideDown() 跳转故障，WordPress

Question

我正在使用 jquery (v2.2.4) slideUp() 和 slideDown() 到 show/hide 一个 <details> 标签。 <details> 内有 3 个内容不同的 div：一个显示最近的帖子，另一个显示最近的评论，第三个显示搜索字段。每个按钮都有一个 <a> 标签，它还会检查子内容 div 是否处于活动状态，并相应地添加或删除类。

虽然 jquery 在显示和隐藏 <details> 以及添加和删除类方面有效，但幻灯片动画似乎仅适用于大约 5 个像素，然后它 "jumps" 打开。由于 div 中的内容是动态的，我无法在任何东西上设置特定的高度。

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

我不确定这是否与 CSS 或 jquery 或两者有关 — 猜测是某种 CSS 冲突。我在这里查看了有关幻灯片故障的其他主题，但就 margin 和 padding 看不出与我的问题有什么关系。我认为这可能是一个 float 问题，但我确实对使用伪元素的 <ul> 标签和 display:table 有一个针对浮动 <li>.

显示问题的清晰修复

欢迎指教。

HTML/PHP:

<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>

jquery:

$('#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();
});

CSS:

#tips-nav { position:relative; margin:0; padding:0; background:#E3DECB; } 
#tip-nav-content { position:relative; display:none; overflow: hidden; margin:0; padding:0; }
#tip-nav-content:before { content:''; position:absolute; top: -10px; left: -10px; width:105%; height:10px; box-shadow: 0 0 15px rgba(26, 40, 53,.8); }

.tips-navigation { position:relative; height:50px; overflow:hidden; }
.tips-navigation ul { position:relative; height:50px; margin:0; padding:0; }
.tips-navigation li { display:block; float:left; text-align: center; background:#1A2835; }
.tips-navigation li:hover { background:#DB5D3B; }
.tips-navigation a { display:block; line-height: 49px; padding:0 0 1px; }
.tips-navigation a:before { font-family:dd_icons !important; font-size:.9em; margin-right:4px; }

#post-content { display:none; }
#comment-content { display:none; }
#search-content { display:none; }

.show-the-content { display:block !important; }

#tip-nav-content header { background:#CEC7B3; padding:15px 0; }
#tip-nav-content h4 { padding:0 20px; margin:0; }
#post-content h4:before, #comment-content h4:before { content:'T'; font-family: dd_icons; margin-right:7px; display:inline-block; font-size:1.2em; vertical-align: -2px; }
#search-content h4:before { content:'g'; font-family: dd_icons; margin-right:7px; display:inline-block; font-size:1.2em; vertical-align: -2px; }

.tip-nav-ul { margin:0; }
.tip-nav-ul li { position:relative; display:block; }
.tip-nav-ul li:hover { background:#DB5D3B; }
.tip-nav-ul li:hover a:before { color:#2A3F51; }
.tip-nav-ul li a { display:inline-block; margin:4px 0 0 0; padding:13px 13px !important; }
#pc-comment-ul li a { display:block; margin:0; padding:10px 0; font-size:.9em; }
#pc-comment-ul li:last-of-type { border:none; }
#pc-comment-ul li { height:initial; border-bottom:1px dashed #AAA48F; }
.rc-link:before { content:'b'; font-family: dd_icons; color:#898472; display:inline-block; margin-right:4px; }
#pc-post-ul li { overflow:hidden; padding:7px; border-bottom:1px dashed #AAA48F; }
#pc-post-ul li:last-of-type { border:none; }
#pc-comment-ul li:hover, #pc-post-ul li:hover { border-color:#DB5D3B; }
.tip-nav-ul li p { font-size:.9em; margin:0; color:#DB5D3B; }
.tip-nav-ul li:hover p { color:#fff; }
.tip-nav-ul li:hover p + p { color:#ddd; }
.tip-nav-ul li p + p { font-size:.8em; margin:0; color:initial; }
.tip-nav-thumb { display:block; float:left; width:52px; height:52px; background:#0F171E; margin-right:10px; }

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

Answer 1

我发现了这个问题，所以我想 post 如果其他人遇到这个问题，我会解决这个问题。

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

Jquery slideUp() slideDown() 跳转故障，WordPress

Jquery slideUp() slideDown() jump glitch, WordPress

wordpress

jquery

slidedown

slideup

visual-glitch