Question

我正在为 WordPress 网站创建一个简单的“阅读更多/阅读更少”按钮，按下该按钮会使用 slideToggle 显示隐藏的内容。它采用 WordPress插件的形式。按钮淡入和淡出淡出。我正在使用php / html来显示页面。

除了一个小小的打嗝之外，一切都很好。出于某种原因，当单击“阅读更多”按钮并且动画开始时，内容div（或p标签 - 我无法确定）可以向下开始几个像素，然后在完成动画后向上移动。反之亦然，当点击Read Less按钮时，动画会做同样的事情。

我查看了php和css，我找不到任何东西。我甚至检查了这些元素并删除了所有的css，但它没有帮助。

我已经包含了所有代码和一个简短视频，以向您展示我的意思。

以下是视频的链接：https://youtu.be/3LnmaPglyPI

的Javascript

jQuery('.wpsm-content').addClass('wpsm-content-hide');
jQuery('.wpsm-show, .wpsm-hide').removeClass('wpsm-content-hide');
jQuery('.wpsm-show').on('click', function (e) {
    "use strict";
    var currentContent = jQuery(this);
    function complete() {
        jQuery(currentContent).next('.wpsm-content').slideToggle(800);
    }
    jQuery(this).fadeOut(200, complete);
    e.preventDefault();
});
jQuery('.wpsm-hide').on('click', function (e) {
    "use strict";
    var wpsm = jQuery(this).parent('.wpsm-content');
    function complete() {
        wpsm.prev('.wpsm-show').fadeIn(200);    // Read More
    }
    wpsm.slideToggle(1250, complete);
    e.preventDefault();
});

CSS

.wpsm-show a, .wpsm-show:active, .wpsm-show:visited {
   cursor: pointer;
   text-decoration: none;
}
.wpsm-show:hover {
   cursor: pointer;
   text-decoration: underline;
}
.wpsm-hide a, .wpsm-hide:active, .wpsm-hide:visited {
   cursor: pointer;
   text-decoration: none;
}
.wpsm-hide:hover {
   cursor: pointer;
   text-decoration: underline;
}
.wpsm-content-hide {
  display: none;
}

PHP / HTML

add_shortcode( 'show_more', 'wpsm');
function wpsm( $attr, $smcontent ) {
  if (!isset($attr['color'])) $attr['color'] = '#cc0000';
  if (!isset($attr['list'])) $attr['list'] = '';
  if (!isset($attr['more'])) $attr['more'] = 'show more';
  if (!isset($attr['less'])) $attr['less'] = 'show less';
  $wpsm_string  = '<div class="show_more">';
  $wpsm_string .= '<p class="wpsm-show" style="color: ' . $attr['color'] . ' ">'; 
  $wpsm_string .= $attr['list']. ' '  . $attr['more'];
  $wpsm_string .= '</p><div class="wpsm-content">';
  $wpsm_string .= $smcontent;
  $wpsm_string .= ' <p class="wpsm-hide" style="color: ' . $attr['color'] . ' ">'; 
  $wpsm_string .= $attr['list']. ' '  . $attr['less'];
  $wpsm_string .= '</p>';
  $wpsm_string .= '</div></div>';
  return $wpsm_string;
}

add_action( 'wp_enqueue_scripts', 'sm_scripts');
function sm_scripts (){
  $plugin_url = plugins_url( '/', __FILE__ );
  wp_enqueue_style (
    'sm-style',
    $plugin_url . 'wpsm-style.css'
  );
  wp_enqueue_script (
    'sm-script',
    $plugin_url . 'wpsm-script-mine.js',
    array( 'jquery' ),
    '1.0.1',
    true
  );
}

add_action('wp_footer', 'sm_scripts');
?>

slideToggle，fadeIn，fadeOut动画在动画期间向上移动

0 个答案: