управление меню css на основе дочерних элементов - PullRequest
Новая
       12

управление меню css на основе дочерних элементов

0 голосов
/ 16 сентября 2010

Мне нужно установить 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);
        }

Ответы [ 2 ]

0 голосов
/ 16 сентября 2010

Вы можете добавить свойство cssClass в класс MenuItem (если оно еще не существует) и установить его при заполнении меню. Тогда вам придется использовать это свойство cssClass при рендеринге пунктов меню в html.

Теперь я не знаю, как выглядит класс MenuItem, так что это довольно общее решение.

0 голосов
/ 16 сентября 2010

Предполагая структуру 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 , например: 

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

См .: http://jsfiddle.net/KWHf6/. Однако, если вы делаете это только для их стилизации, то я бы предложил добавить класс к каждому из li, которые имеют подменю, чтобы удалитьзависимость Javascript.

...