0

そのページのメイン メニュー項目をロールオーバーすると、ページの抜粋 (簡単な説明) が表示されます。

そのページの抜粋テキストを表示するためにフェードインしてからフェードアウトするナビゲーション div の外側に別の div があります….

ロールオーバー時にフェードインするjsがありますが、テキストを取り込む方法がわかりません..

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

2 に答える 2

0

.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>
于 2012-06-20T04:27:02.620 に答える
0

qtip [tooltip] プラグインを使用した 1 つのソリューションを次に示します。ドキュメントについては、 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/

于 2012-06-20T04:42:49.487 に答える