0

したがって、これをあまりにも長い間見てきただけである可能性がありますが、すべてのコードをデバッグし、答えを知っているすべての場所を検索しました。

多分これは不可能です、私にはわかりませんが、これが私がやろうとしていることです。トップレベルのナビゲーションとして機能する水平に表示された順序付けられていないリストがあります。アイテムの1つにカーソルを合わせると、その上の順序付けられていないリストの全幅であるdivを表示したい. これが私の警告です。これを行うためにワードプレスのカスタム投稿タイプを使用しています。順序付けられていないリストは投稿のタイトルであり、ホバー時に表示される div のコンテンツを表示したいと考えています。私はこれでコンテンツの読み込みを行っていますが、これは問題ではありません。表示される div をリスト全体の幅と一致させるための適切な jquery / css の組み合わせが見つからないようです。私はajaxを使用する必要があるかもしれませんか？わかりません、私はそれに慣れていません。

これが私のコードです：

HTML

<div class="menu-header-container"> 
<ul>
<?php
$args = array(
'post_type' => 'menu',
'post_status' => 'publish',
'posts_per_page' => 10,
'offset' => 0,
'order' => 'ASC'
);
$the_query = new WP_Query( $args ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <li>
        <a href="#"><?php the_title(); ?></a>
            <div class="overlay">
                <ul>
                    <li><?php the_field('sub_menu_item_one'); ?></li>
                    <li><?php the_field('sub_menu_item_two'); ?></li>
                    <li><?php the_field('sub_menu_item_three'); ?></li>
                    <li><?php the_field('sub_menu_item_four'); ?></li>
                    <li><?php the_field('sub_menu_item_five'); ?></li>
                    <li><?php the_field('sub_menu_item_six'); ?></li>
                </ul>
            </div>
    </li>
<?php endwhile;?>
</ul>
</div>

CSS

.menu-header-container{
overflow: visible;
float: right;
margin-top: 4%;
}
.menu-header-container > ul > li{
margin-left: 20px;
display:inline-block;
float: right;
}
.overlay{
display: none;
position: absolute;
background: aqua;
}

jquery

<script>
$(".menu-header-container li").hover(function(){
$(this).find(".overlay").stop().fadeIn();
},function(){
$(this).find(".overlay").stop().fadeOut();
});   
</script>

出力

<div class="menu-header-container"> 
<ul>
            <li>
        <a href="#">Top Level one</a>
            <div class="overlay">
                <ul>
                    <li>item in sub div</li>
                    <li>item in sub div</li>
                    <li>item in sub div</li>
                </ul>
            </div>
    </li>
        <li>
        <a href="#">Top Level two</a>
            <div class="overlay">
                <ul>
                    <li>item in sub div</li>
                    <li>item in sub div</li>
                    <li>item in sub div</li>
                </ul>
            </div>
    </li>
       </ul>
</div>

ここに私の出力をhtmlとしていじるので、それらのトップレベルのアイテムを同じ行に配置し、明らかにするdivをトップレベルのulの幅全体に広げて、私の脳が揚げられるようにします。

jsfiddle

4

3 に答える 3

1

liクリックイベントでこれを追加します$('#yourDivId').show();

于 2013-08-20T02:19:12.707 に答える
0

li タグに ID を指定し、jquery を使用する

$('#liId').click(function() {
  $('#divId').css('display': 'none');
});

または、対応するli

$('#liId').toggle(function() {
  $('#divId').css('display': 'none');
}, function() {
  $('#divId').css('display': 'block');
});
于 2013-08-20T02:10:57.620 に答える
0

デモ

CSS

ul,li{
    margin:0;
    padding:0;
}
li{
    list-style-type:none;
}
于 2013-08-20T02:11:51.673 に答える