Novice coder - apologies for any stupid comments
我一直在试着在我的Wordpress博客页面上的一个div上制作一个show more按钮。我看过很多教程，它们似乎都同意JavaScript/jQuery是唯一的方法。
许多解决方案依赖于创建两个单独的div，您可以切换“显示：无”，因为使用foreach （据我所知）无法分割的论点
如果我可以简单地覆盖“最大高度”设置（而不必将其拆分为多个div），只需单击链接即可将div填充到自己所需的高度，这将非常有用。
本页讨论设置高度：https://stackoverflow.com/questions/5531306/change-div-height-onclick-with-animation
使用：
$(\'div\').click(function(){
$(this).animate({height:\'300\'})
})
但没有解释如何实施它。。。
将Java实现到wordpress中对于初学者来说很难，因为wordpress这样的网站上有很多信息。Codex已经对javascript的工作原理有了太多的了解。虽然我的php并没有那么破旧，但我对java一无所知，很难了解如何使用它。
我不想找人帮我做这件事，只要有人能帮我，我都会非常感激。
=======================================================
The solution I ended up using through lack of understanding and topic being closed:虽然我建议使用乔伊·亚克斯的建议，因为它看起来更加健壮，动画也很好。我无法通过点击链接获得同样的效果，但这阻止了在移动/触摸屏设备上使用。
下面讨论的div称为“members dir list”（成员目录列表）（&；我还必须将CSS从max-height:100px; 简单地height:100px; 使代码正常工作。
<span id="expandthis" onClick = "javascript:document.getElementById(\'members-dir-list\').style.height = \'auto\'; document.getElementById(\'expandthis\').style.display = \'none\'; document.getElementById(\'shrinkthis\').style.display = \'block\';">Show More</span>
<span id="shrinkthis" onClick = "javascript:document.getElementById(\'members-dir-list\').style.height = \'100px\'; document.getElementById(\'shrinkthis\').style.display = \'none\'; document.getElementById(\'expandthis\').style.display = \'block\';">Show Less</span>
onClick命令1中的三个javascript条目。调整高度2。隐藏当前链接。3、显示其他链接。
我的span样式看起来像超链接，以避免使用<a href="#" 然后被扔到页面顶部。
最合适的回答,由SO网友:Joey Yax 整理而成
您需要先将jQuery和自定义脚本文件加载到WordPress中。使用以下方法执行此操作wp_enqueue_scripts. 把这个放进去functions.php 在主题目录中。Make sure the path to the script file (I called it main.js here) is correct for your environment.
function mytheme_load_js() {
// load in jquery
wp_enqueue_script( \'jquery\' );
// register and load site js
wp_register_script( \'mytheme_js\', get_template_directory_uri() . \'/js/main.js\', \'\', \'1.0\', true );
wp_enqueue_script( \'mytheme_js\' );
return true;
}
// load js
add_action( \'wp_enqueue_scripts\', \'mytheme_load_js\' );
这将把jQuery和自定义javascript加载到页脚中。如果wp\\u register\\u脚本中的最后一个参数设置为
true 将注入脚本以代替
wp_footer 在模板文件中，否则它将进入页眉，其中
wp_header.
现在，您发布的jQuery非常接近您需要的内容。这是扩展div的JS。如果需要切换，可以对div进行扩展和收缩，但我只想讨论一下如何扩展。您真正需要更改的是包含好友的div的名称。
var $friends = $( \'.buddypress-friends\' );
$( document ).ready( function() { // wait until the DOM is loaded...
$friends.on( \'click\', function( e ) {
var current_height = $( this ).outerHeight(); // get the current height of the friends div
var new_height = $friends[0].scrollHeight; // get the actual height of the div as if a max-height or height were not set
var animation_duration = 500; // duration in milliseconds for the animation to last
$friends.css({ height: current_height, maxHeight: new_height }) // set the initial height and the max-height of the friends div. Since these are defined inline they will override properties set in your stylesheet
.animate({ height: new_height }, animation_duration ); // animate the new height
} );
} );
虽然上面的JS可以正常工作，但我建议删除
.animate 脚本的一部分，并让CSS制作动画，因为CSS动画通常更快更平滑。
.buddypress-friends{
max-height: 100px;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
-moz-transition: all .5s ease;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
