Question

我以为我会开始一个编码网站，写博客很容易，而且读起来像纸上的普通文字（即，没有绒毛;这是在模板中，我会照顾那个）。

在文中我想将单个单词标记为“预览链接”，如下所示： - 代码段（前或类似） - 图片 - 带有html和php的div或框架 - 可能是音频和视频片段，以小型嵌入式播放器的形式出现。

行为应该是在悬停时，灰盒类型框会在文本上显示内容。更好的是，在点击时，它会切换扩展/收缩带有链接的线下的部分，与文本容器一样宽，可以说是在线显示弹出窗口。

我可以在php中执行此操作，但我想保存一些代码时间，并且还可以轻松插入上述类型的项目。

那么你可以推荐像这样的东西（插件）吗，Wordpress或Movable Type？我还接受网站的链接，这些网站上有'div visibility：hidden'风格的折叠和折叠技术。

易于插入此类物品是关键。最好只需按Ctrl + V并标记其类型。

Answer 1

我建议创建一个用于后期创作的简短代码（即[toggle heading="Preview Link"]Hidden Content[/toggle]。这个内容将包含在您确定它出现在您网站上的类的范围内。然后只需要包含一个小jQuery即可选择该课程并在click或mouseover或其他任何内容中显示隐藏的内容。

functions.php

的示例短代码功能

function toggle_content( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'heading'      => '',
    ), $atts));

    $out .= '<span class="toggle"><a href="#">' .$heading. '</a></span>';
    $out .= '<div class="toggle_content" style="display: none;">';
    $out .= '<div class="toggleinside">';
    $out .= do_shortcode($content);
    $out .= '</div>';
    $out .= '</div>';

   return $out;
}
add_shortcode('toggle', 'toggle_content');
?>

jQuery可能看起来像这样（例如click）：

function sys_toggle() {
    jQuery(".toggle_content").hide(); 

    jQuery(".toggle").toggle(function(){
        jQuery(this).addClass("active");
        }, function () {
        jQuery(this).removeClass("active");
    });

    jQuery(".toggle").click(function(){
        jQuery(this).next(".toggle_content").slideToggle();
    });
}

jQuery(function(){
    sys_toggle();
});

悬停弹出插件最好用于Wordpress

1 个答案: