jquery - css jquery 菜单 - 切换幻灯片放映隐藏 div

Question

checkout 码here !

这些是我的问题:

1. Div 不会在单击自身时切换为隐藏，只有在我单击另一个时才会隐藏。 (编辑:或基本上任何地方)

2. 所有应该隐藏的 div 在页面加载时闪烁然后消失。有什么办法可以避免吗？ (解决了!css display:none;)

3. 被点击的 div 应保持其突出显示的背景颜色，直到其他人或自己被点击。想不通。

4. (侧面)当我在 ipad 上打开页面时，menu_row 在单击时保持其 :hover 背景色。没关系，但是当单击 self 并且显示的 div 缩回时，它应该恢复为灰色。可能吗？

Answer 1

1.

jQuery(document).ready(function($) {

    //cache the `.menuImage` elements since they will be used frequently
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {

        //get the `.menuImage` element that is a child of the clicked element
        var $ele = $(this).children(".menuImage");

        //`.slideUp()` all the `.menuImage` elements that aren't a child of the clicked element
        $menuImages.not($ele).slideUp(500);

        //toggle the visibility of the child of the clicked element
        $ele.slideToggle(500);
    });
});​

演示:http://jsfiddle.net/jasper/XcJwW/17/

3.

jQuery(document).ready(function($) {
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {
        var $ele = $(this).children(".menuImage");

        //not only slide the rest of the `.menuImage` elements away, but also remove the `hover` class from them
        $menuImages.not($ele).slideUp(500).parent().removeClass('hover');

        //not only toggle the view of the clicked `.menuImage` element, but also toggle the `hover` class for the element
        $ele.slideToggle(500).parent().toggleClass('hover');
    });
});​

这需要对您的 CSS 进行一些小的调整:

#menu_row1 .menuItem:hover, #menu_row1 .menuItem.hover { background:#ff0000; }
#menu_row2 .menuItem:hover, #menu_row2 .menuItem.hover { background:#ffe100; }
#menu_row3 .menuItem:hover, #menu_row3 .menuItem.hover { background:#0033cc; }

请注意，用户可以悬停这些元素之一，或者您可以为该元素提供hover类，两者都会产生相同的结果。

演示:http://jsfiddle.net/jasper/XcJwW/20/