CSS Скрытие раскрывающегося меню для определенных пунктов меню
У меня есть следующее меню, реализованное в теме HTML / CSS, работающей на Confluence.
Тема, которую я использую, по умолчанию предоставляет опции для активации раскрывающегося меню для всех пунктов меню. Однако я бы хотел, чтобы раскрывающееся меню отображалось только для одного из пунктов меню.
В теме нет возможности переключать раскрывающиеся списки для определенных пунктов меню, поэтому я вынужден прибегать к настраиваемому CSS.
HTML, соответствующий пункту меню ЗАМЕТКИ О ВЫПУСКЕ, таков:
<li id = "rw_category_key_notes" data-name-key = "notes">
<a class = "rw_custom_url" href = "http://localhost:8090/display/DDB/Release+Notes">
<span class = "rw_item_name">RELEASE NOTES</span>
<span class = "rw_item_dd rw_dropdown_btn"></span>
</a>
</li>Кроме того, добавление следующего настраиваемого CSS удаляет раскрывающееся меню для ВСЕХ пунктов меню.
#rw_category_menu.rw_theme_underline ul.rw_category_items li a .rw_item_dd{
display: none;
}Я бы хотел, чтобы CSS условно не отображал раскрывающийся список для пункта меню ЗАМЕЧАНИЯ О ВЫПУСКЕ, а вместо этого отображал его только для ОБУЧЕНИЯ.
Как мне это сделать?
Спасибо.
Да, я полагаю, что так и будет, но мои ноу-хау в CSS незначительны, и я не совсем уверен в синтаксисе, предназначенном для конкретных элементов. Сделал несколько попыток, но они не совсем сработали.
Большинство CMS и тем используют меню, раскрывающееся только в том случае, если в вашем меню есть дочерние элементы, разве это не ваш случай?
@ Джейк, это не вариант. Я также спросил создателей темы, и они согласились, что это ошибка; вот почему я пытаюсь найти собственное решение CSS.
Вы пытаетесь убрать только выпадающую кнопку, что ли?
@misorude, да только выпадающий.
Если вы хотите скрыть только эту стрелку, подойдет что-то вроде #rw_category_key_notes .rw_dropdown_btn { display: none; }. (Если мешает правило с более высокой специфичностью, добавьте !important)
@misorude Это сработало! Спасибо.
Ответы 2
если вы хотите настроить таргетинг только на первый экземпляр элемента, который вы можете использовать
ul.your-ul-class > li {
// target only the 1st node instance
}
ul.your-ul-class li > li.second-intance {
// target only the 2nd node instance
}
это будет только первый экземпляр узла
ex:
<ul>
<li> -- CSS implemented -- <li>
<li> -- CSS implemented --
<ul>
<li class = "second-intance" > -- NO CSS implemented -- </li>
</ul>
</li>
<ul>
Спасибо, @misorude!
Это решило, я подал заявку -
#rw_category_key_notes .rw_dropdown_btn { display: none; }в настраиваемый CSS-код темы, как вы предложили. Сам по себе он не скрывает раскрывающееся меню для пункта меню ЗАМЕТКИ О ВЫПУСКЕ, но добавление! Important в конце заставляет его работать.
#rw_category_key_notes .rw_dropdown_btn { display: none !important; }
Использовать идентификатор или конкретный класс для таргетинга только на этот элемент и соответственно отображать раскрывающийся список?