Question

查看代码here！

这些是我的问题：

只有当我点击另一个时，Div才会切换为隐藏。（编辑：或基本上在任何地方）
当页面加载然后消失时，所有应该隐藏的div都会闪烁。有什么办法可以避免吗？（解决了！css display：none;）
单击的div应保持其突出显示的背景颜色，直到单击另一个或自我为止。无法想出那一个。
（侧面）当我在ipad上打开页面时，menu_row保持其：单击时悬停backgroundcolor。没关系，但是当单击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对其中一个元素进行操作，也可以为元素提供hover类，两者都具有相同的结果。

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

Answer 2

这是因为你在slidetoggle之前隐藏了它，使其切换显示。要解决此问题，请隐藏除当前节点正下方的所有元素（我建议使用filter()或not()）。类似的东西：
```
var self = $(this);
// Filter out elements that are descendants of this
$('menuItem').filter(function () { return ! self.has(this); }).hide();
```
这是因为您在.hide('slow')上执行了.ready。摆脱缓慢，这应该解决问题。
如果您声明:hover的样式，则还需要声明对于您在点击时添加/删除的类。这样你就可以保留这些风格。
老实说，我不知道。 iPad没有悬停，所以我猜他们正在基于:active应用它。如果您明确设置:active样式，则可以使用该样式而不是:hover样式。

Answer 3

将您的脚本更改为：

jQuery(document).ready(function($) {
    $(".menuImage").hide();
    $(".menuItem").click(function() {
    $(".menuItem").not(this).children(".menuImage").hide('slow');
    $(this).children(".menuImage").slideToggle(500);
    });
});

不需要脚本的第二部分。

css jquery menu - toggleSlide show hide div

3 个答案: