Question

当翻转该页面的主菜单项时，寻找远离页面摘录（简短描述）！

我将在导航div中设置一个单独的div，它将显示该页面的摘录文本，然后淡出......

我有js在翻转时淡入，但不知道如何引入文本..

$("#menu-item-1266").hover(
  function () {
    $(".nav-excerpt").fadeIn('fast');
  }, 
  function () {
    $(".nav-excerpt").fadeOut('fast');
  }
);

Answer 1

在{。1}}

的.nav-excerpt中手动加载页面摘录

echo my_get_post_excerpt( $post->ID );

所以你应该有这样的东西：

function my_get_post_excerpt($id)
{
   $content_post = get_post($id);
   return $content_post->post_excerpt;
}

echo my_get_post_excerpt( $post->ID );

Answer 2

这是使用qtip [tooltip]插件的一个解决方案。有关文档，请参阅http://craigsworks.com/projects/qtip/docs/。

CSS：

ul { margin: 20px; }
li { padding: 5px; float: left; border-left: 1px dotted #d0d0d0; background-color: green; }
li:hover { background-color: yellow; }
li a { color: white; text-decoration: none;  }
li a:hover { color: black; }

#excerpt { display: none; }

HTML：

<ul id="menu">
    <li><a rel=".excerpt-1" href="#">Nav Item 1</a></li>
    <li><a rel=".excerpt-2" href="#">Nav Item 2</a></li>
    <li><a rel=".excerpt-3" href="#">Nav Item 3</a></li>
</ul>


<div id="excerpt">
    <div class="excerpt-1">EXCERPT 1 - Lorem ipsum dolor sit amet</div>
    <div class="excerpt-2">EXCERPT 2 - Lorem ipsum dolor sit amet</div>
    <div class="excerpt-3">EXCERPT 3 - Lorem ipsum dolor sit amet</div>
</div>

-

在#excerpt中呈现您的内容。

-

JS：

$(document).ready(function() {
    $('#menu li a').each(function() {
        var id = $(this).attr('rel');
        $(this).qtip({ 
            content: $(id).html(),
            style: { name: 'dark' }
        });
    });

    $('#menu li a').click(function() { return false; });
});

-

希望这会有所帮助。工作演示在这里：http://jsfiddle.net/3vrjL/

在该页面的悬停菜单项上显示摘录文本

2 个答案: