Question

我正在尝试在我的文字上添加更多/更少的切换脚本，但它不会起作用。它应该在文本的25px的页面加载高度的开始显示，并且在高度按钮之后显示全高，或者自动高亮，按下jquery脚本的按钮。我无法在wordpress上工作。

我尝试了两种不同的方式。当然还有短代码。

function piki( $atts, $content = null ) {
    $url = '/?s=';
    $str = '';

    $output = array();
    $count = 0;

    foreach (explode(", ",$content) as $content) {
        $count++;
        $output[] = "<a href='" . $url . $content . "'>" . $content . "</a>";
        if ($count == 50) {
            break;
        }
    }
{ ?>
<script type="text/javascript">
jQuery('.more').click(function() {
    if(jQuery('.piki').css('height') != '25px'){
        jQuery('.piki').stop().animate({height: '25px'}, 200);
        jQuery(this).text('More...');
    }else{
        jQuery('.piki').css({height:'100%'});
        var xx = jQuery('.piki').height();
        jQuery('.piki').css({height:'28px'});
        jQuery('.piki').stop().animate({height: xx}, 400);
        // ^^ The above is beacuse you can't animate css to 100% (or any percentage).  So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: jQuery('.show-more-snippet').css({height:'100%'});^^ //
        jQuery(this).text('Less...');
    }
});
</script>
<div id="piki" class="piki" style="height: 25px; overflow: hidden;"><?php echo implode(", ", $output); ?></div><a class="more" style="float: left;" href="#stay_here">Read more <br><br></a>
<?php }
}
add_shortcode( 'piki', 'piki' );

或者这样

function piki( $atts, $content = null ) {
    $url = '/?s=';
    $str = '';

    $output = array();
    $count = 0;

    foreach (explode(", ",$content) as $content) {
        $count++;
        $output[] = "<a href='" . $url . $content . "'>" . $content . "</a>";
        if ($count == 50) {
            break;
        }
    }
{ ?>
<script type="text/javascript">
jQuery('.more').click(function() {
    if(jQuery('.piki').css('height') != '25px'){
        jQuery('.piki').stop().animate({height: '25px'}, 200);
        jQuery(this).text('More...');
    }else{
        jQuery('.piki').css({height:'100%'});
        var xx = jQuery('.piki').height();
        jQuery('.piki').css({height:'28px'});
        jQuery('.piki').stop().animate({height: xx}, 400);
        // ^^ The above is beacuse you can't animate css to 100% (or any percentage).  So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: jQuery('.show-more-snippet').css({height:'100%'});^^ //
        jQuery(this).text('Less...');
    }
});
</script>
<?php }

    return '<div id="piki" class="piki" style="height: 25px; overflow: hidden;">'.implode(", ", $output).'</div><a class="more" style="float: left;" href="#stay_here">Read more <br><br></a>';
}
add_shortcode( 'piki', 'piki' );

我做错了什么？

为什么jQuery更多/更少的切换脚本不能在WordPress中工作？

0 个答案: