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

Question

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

我将在导航 div 之外有一个单独的 div，它将淡入以显示该页面的摘录文本，然后淡出……。

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

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

Answer 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 );

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

<ul id="menu">
    <li id="menu-item-1266">Item 1266<li>
    <li id="menu-item-1267">Item 1267<li>
    <li id="menu-item-1268">Item 1268<li>
    <li id="menu-item-1269">Item 1269<li>
</ul>

<div class="nav-excerpt">
    <div rel="menu-item-1266"><?php echo my_get_post_excerpt( 1266 ); ?></div>
    <div rel="menu-item-1267"><?php echo my_get_post_excerpt( 1267 ); ?></div>
    <div rel="menu-item-1268"><?php echo my_get_post_excerpt( 1268 ); ?></div>
    <div rel="menu-item-1269"><?php echo my_get_post_excerpt( 1269 ); ?></div>
</div>

<script>
$("#menu li").hover(
  function () {
    $(".nav-excerpt div[rel="+$(this).attr('id')+"]").fadeIn('fast');
  }, 
  function () {
    $(".nav-excerpt div[rel="+$(this).attr('id')+"]").fadeIn('fast');
  }
);
</script>

Answer 2

Here is one solution using the qtip [tooltip] plugin. See http://craigsworks.com/projects/qtip/docs/ for 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>

--

Render your content inside #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; });
});​

--

Hope this helps. Working demo is here: http://jsfiddle.net/3vrjL/