0

仅在 Firefox 9 中测试（到目前为止）。

在以下 HTML 中，如果您将class="yui3-skin-sam"BODY 标记移动到 main_menu DIV 标记，如下所示：

<div id="main_menu" class="yui3-skin-sam yui3-menu yui3-menu-horizontal yui3-menubuttonnav">

你会得到一个非常不同的外观（菜单背景中的图形丢失了）。但是，如果我将 main_menu DIV 与其他应用class="yui3-skin-sam"皮肤的 DIV 一起包装，它就可以正常工作。为什么？是否有可能让它只在一个 DIV 上工作，就像它对整个 BODY 和包装的 DIV 一样？

<html>
<head>
    <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js">
    </script>
</head>
<body class="yui3-skin-sam">
    <div id="main_menu" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
        <div class="yui3-menu-content">
            <ul class="first-of-type">
                <li class="yui3-menu-item">
                    <a class="yui3-menuitem-content" href="#">Home</a>
                </li>
                <li>
                    <a class="yui3-menu-label" href="#search_menu"><em>Search</em></a>
                    <div id="search_menu" class="yui3-menu">
                        <div class="yui3-menu-content">
                            <ul>
                                <li class="yui3-menuitem">
                                    <a class="yui3-menuitem-content" href="http://www.google.ca">Google</a>
                                </li>
                                <li class="yui3-menuitem">
                                    <a class="yui3-menuitem-content" href="http://www.yahoo.ca">Yahoo</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        YUI().use('node-menunav', function(Y) 
        {
            var menu = Y.one("#main_menu");

            menu.plug(Y.Plugin.NodeMenuNav);

            menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
        });
    </script>
</body>

4

1 回答 1

1

几乎所有的 YUI 小部件都使用 CSS 样式声明，看起来像

.yui3-skin-sam .yui3-some-widget-name ... {
   ...
}

而不是

.yui3-skin-sam.yui3-some-widget-name ... {
   ...
}

所以有一个隐含的假设，即小部件位于某个容器的子容器中，该容器具有皮肤类。这通常是最有意义的，因为通常您希望将一堆具有一致皮肤的小部件组合在一起。所以（正如您所发现的）应用皮肤的最简单方法是只使用一个额外的包含div将皮肤类应用到菜单。

于 2012-04-20T17:04:44.290 回答