Question

好的，所以我正在尝试使用无序列表构建导航，该列表在li悬停时显示div。我在wordpress循环中工作，所以这是我的HTML：

<div class="menu-header-container">
    <ul>
        <li>
            <?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(); ?>
            <a href="#"><?php the_title(); ?></a>
        <div class="overlay">
            <p><?php the_field('sub_menu_item_one'); ?></p>
        </div>

这部分似乎工作正常。这是我的jquery：

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

这是我的CSS

.menu-header-container {
    overflow: visible;
    float: right;
    width: 74%;
    margin-top: 4%;
}
.menu-header-container li {
    position: relative;
    display: block;
    height: 100%;
}
.menu-header-container ul li a {
    float: right;
    padding-left: 5%;
    font-size: 1.3125em;
    font-family:'MuseoSans300';
    text-transform: capitalize;
    display: block;
}
.overlay {
    display:none;
}
li > .overlay {
    position: absolute;
    top: 100%;
    left: 25%;
    overflow: visible;
}

这是我的输出：

<div class="menu-header-container">
    <ul>
        <li>
            <a href="#">Knowledge Center</a>
            <div class="overlay">
                <p>test</p>
            </div>
            <a href="#">Client Services</a>    
            <div class="overlay">
                <p>Technology For You</p>
            </div>
</div>

因此，当我将鼠标悬停在其中一个行项目上时，它会显示所有嵌套div中的所有内容，我认为这是一个jquery问题，但它可能是wordpress。

Answer 1

您的HTML已更正：

<div class="menu-header-container">
    <ul>
        <li>
            <?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(); ?>
            <a href="#"><?php the_title(); ?></a>
            <div class="overlay">
                <p><?php the_field('sub_menu_item_one'); ?></p>
            </div>
        </li>
    </ul>
</div>

显示/隐藏嵌套的div jquery html

1 个答案: