0

我需要根据它们是否有子项在悬停时在某些菜单项上设置 css。

"Home"    "Manage Customer"          "Manage Employee"
                "Customer List"              "Employee List"
                "Customer Detail"            "Employee Detail"

示例菜单项如上所示。我希望“主页”、“客户列表”、“客户详细信息”、“员工列表”、“员工详细信息”在悬停时有一个 CSS（因为他们没有任何孩子）

和“管理客户”、“管理员工”应该有不同的 CSS。

我如何做到这一点。

代码

protected void Page_Load(object sender, EventArgs e)
        {
            MenuItem miHome = new MenuItem("Home", "0");
            miHome.NavigateUrl = "http://www.google.com";

            MenuItem miManageCustomer = new MenuItem("Manage Customer", "1");
            miManageCustomer.NavigateUrl = "javascript:void(0)";

            MenuItem miCustomerList = new MenuItem("Customer List", "2");
            miCustomerList.NavigateUrl = "http://www.google.com";
            miManageCustomer.ChildItems.Add(miCustomerList);

            MenuItem miCustomerDetail = new MenuItem("Customer Detail", "3");
            miCustomerDetail.NavigateUrl = "http://www.google.com";
            miManageCustomer.ChildItems.Add(miCustomerDetail);

            MenuItem miManageEmployee = new MenuItem("Manage Employee", "4");
            miManageEmployee.NavigateUrl = "javascript:void(0)";

            MenuItem miEmployeeList = new MenuItem("Employee List", "5");
            miEmployeeList.NavigateUrl = "http://www.google.com";
            miManageEmployee.ChildItems.Add(miEmployeeList);

            MenuItem miEmployeeDetail = new MenuItem("Employee Detail", "6");
            miEmployeeDetail.NavigateUrl = "http://www.google.com";
            miManageEmployee.ChildItems.Add(miEmployeeDetail);

            menu1.Items.Add(miHome);
            menu1.Items.Add(miManageCustomer);
            menu1.Items.Add(miManageEmployee);
        }
4

2 回答 2

0

You could add a cssClass property to the MenuItem class (if one doesn't already exist), and set it when populating the menu. Then you'd have to use that cssClass property when rendering menu items to html.

Now, i don't know what does the MenuItem class look like so this is a pretty generic solution.

于 2010-09-16T08:29:20.773 回答
0

假设一个 HTML 结构是这样的：

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Manage Customer</a>
      <ul>
        <li><a href="#">Customer List</a></li>
        <li><a href="#">Customer Detail</a></li>
      </ul>
  </li>
</ul>

您实际上可以将该.not函数与:only-childselector一起使用，如下所示：

$('#menu > li > a').not(':only-child')

请参阅：http: //jsfiddle.net/KWHf6/。但是，如果您只是为了设置它们的样式，那么我建议您为每个li具有子菜单的类添加一个类，以删除 Javascript 依赖项。

于 2010-09-16T07:09:57.877 回答