Question

导航项目：

<div id="navigation">
            <ul>
                <li>
                    <a href="#">nav 1</a>
                    <div class="hideshow">123</div>
                </li>
                <li>
                    <a href="#">nav 2</a>
                    <div class="hideshow">123</div>
                </li>
                <li>
                    <a href="#">nav 3</a>
                    <div class="hideshow">123</div>
                </li>
                <li>
                    <a href="#">nav 4</a>
                    <div class="hideshow">123</div>
                </li>
            </ul>
        </div>

的CSS：

 #navigation ul {
        list-style-type: none;
    }

    #navigation li {
        float: left;
        padding: 10px 30px 0px 0px;
    }

        #navigation li a {
            text-decoration: none;
            color: #000000;
            display:block;
            width:40px;


            text-align:center;
            vertical-align:middle;
        }

            #navigation li a:visited {
                text-decoration: none;
                color: #000000;
            }


    .hideshow {
        display: none;
    }

JS

<script>

    $("#navigation li a").hover(
        function (event) {
            $(this).find(".hideshow").show();
            $(this).find(".hideshow").css("background-color", "#808080");

        },
        function (event) {
            $(this).find(".hideshow").hide();
            $(this).find(".hideshow").css("background-color", "#fff");
        }
     );
</script>

为什么show()函数没有触发的任何想法？

Answer 1

您想使用.siblings()代替.find()

.find()遍历DOM树，链接中没有子元素

JQuery API for find ＆＃34; Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element. ＆＃34;

http://api.jquery.com/find/

小提琴：http://jsfiddle.net/hBnXS/6/

$("#navigation li a").hover(
        function (event) {
            $(this).siblings(".hideshow").show();
            $(this).siblings(".hideshow").css("background-color", "#808080");

        },
        function (event) {
            $(this).siblings(".hideshow").hide();
            $(this).siblings(".hideshow").css("background-color", "#fff");
        }
     );

Answer 2

使用NEXT或SIBLINGS，而不是FIND来查找LINK旁边的DIV而不是LINK（A）元素内的DIV。这是代码，也缩短了：

$("#navigation li a").hover(

    function (event) {
        $(this).next(".hideshow")
            .show('')
            .css("background-color", "#808080");
    },
    function (event) {
        $(this).next(".hideshow")
            .hide()
            .css("background-color", "#fff");
});

Answer 3

问题是您的链接标记中没有.hideshow元素。将您的.hover()选择器更改为$("#navigation li")即可。

新小提琴：http://jsfiddle.net/hBnXS/3/

隐藏/显示悬停的简单导航

3 个答案:

小提琴：http://jsfiddle.net/hBnXS/6/