0

我在我的页面中添加了一个 jsTree，即 jQuery 1.6.4：

    <div id="categoriesMenu" class="categoriesMenu"><!--  --></div>
    <script type="text/javascript">
        function convertCategoriesForMenu(categories) {
            var scrubbedData = [];
            $.each(categories, function(idx,category) {
                var scrubbedCat = {
                        "data" : category.name,
                        "metadata" : { id : category.id },
                        "children" : convertCategoriesForMenu(category.childCategories),
                        "attr" : { "href" : "${categories_base_url}"+category.id }
                };

                scrubbedData.push(scrubbedCat)
            });
            return scrubbedData;
        }

        $(function () {
            $("#categoriesMenu").jstree({ 
                "json_data" : {
                    "ajax" : {
                        "url" : "${categories_base_url}",
                        "success" : function (data) { 
                            return convertCategoriesForMenu(data);
                        }
                    }
                },
                "themes" : {
                    "theme" : "classic",
                    "dots" : false,
                    "icons" : false
                },
                "plugins" : [ "themes", "json_data" ]
            });
        });
    </script>

但是，它将每一行显示为扩展图像，然后在新行（和灰色背景）上显示标题： 混乱的菜单

我似乎无法弄清楚为什么。从我的服务器返回的 JSON 数据前面似乎没有任何回车或换行，我在 JS 中放置了断点并确认浏览器解析 JSON 时，它似乎也没有任何回车或换行。

我尝试换掉主题，但这似乎没有任何效果。

编辑 1 CSS 继承绝对是问题所在。看起来它正在为#menu 从 Roo 的 standard.css 样式中提取 display:block。问题是，需要这种样式，以便菜单内容最终位于左侧，这就是我使用 jsTree 的目的。

树的结构如下：

<ul> <!-- root of menu, display:block -->
    <li> <!-- Node element, display:block -->
        <ins />  <!-- image, display:inline -->
        <a>Node Name</a> <!-- text for node, display:inline -->
    </li>
</ul>

如果我将树放在标签之外，它会按预期工作。但是，如果我把它放在里面，所有的元素都会被设置为 display:block。

所以，问题是：如何在 and 标签上应用 CSS 样式？

4

0 回答 0