0

因此，我可能已经看这个太久了，但是我已经调试了所有代码，并在我知道的所有地方搜索了答案。

也许这是不可能的，我不确定，但这就是我想要做的。我有水平显示的无序列表作为我的顶级导航。当我将鼠标悬停在其中一个项目上时，我想显示一个 div，该 div 是其上方无序列表的全宽。这是我的警告：我正在使用 wordpresss 自定义帖子类型来执行此操作。无序列表是帖子的标题，我想在悬停时显示的 div 中显示内容。我有这个工作内容加载不是问题，我似乎找不到正确的 jquery / css 组合来使显示的 div 与整个列表的宽度匹配。我可能必须使用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 时打开和关闭 div 显示比例

$('#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 回答