Question

我需要根据它们是否有子项而在其悬停的某些菜单项上设置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);
        }

Answer 1

假设这样的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-child selector一起使用，如下所示：

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

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

Answer 2

您可以将一个cssClass属性添加到MenuItem类（如果尚不存在），并在填充菜单时进行设置。然后，在将菜单项呈现为html时，您必须使用该cssClass属性。

现在，我不知道MenuItem类是什么样的，所以这是一个非常通用的解决方案。

菜单控制基于子项目的CSS

2 个答案: