Question

所以我一直都在考虑这个问题太久了，但是我已经调试了所有代码并搜索了我知道的答案。

也许这是不可能的，我不确定，但这是我正在尝试做的事情。我有水平显示的无序列表作为我的顶级导航。当我将鼠标悬停在其中一个项目上时，我想显示一个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

Answer 1

点击活动时添加此$('#yourDivId').show();

Answer 2

给li标签ID并使用jquery

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

或者您可以创建一个功能，当您单击相应的li时，可以打开和关闭div显示比例

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

Answer 3

DEMO

<强> CSS

ul,li{
    margin:0;
    padding:0;
}
li{
    list-style-type:none;
}

在li hover jQuery html上显示div

3 个答案: