Есть дерево навигации, которое генерится автоматически (WP) и практически нет возможности на него повлиять. Требуется, чтобы были расскрыты только активные узлы дерева (current_page_*) и выделены соответствующим образом.
Скрыть лишние узлы дерева можно с помощью CSS, правда довольно вербозно. А можно попробовать скрыть с использованием JS. Хотелось бы использовать второй способ, чтобы бы облегчить последующую его поддержку. Вопрос: насколько верно с дизайнерско-идеологической точки зрения использовать JS, чтобы изменить визуальное представление части страницы?
Как должно отображаться пользователю:
item 1
item 2
item 3
*item 4*
- item 4.1
...
- *** item 4.4 ***
- item 4.5
item 5
HTML:
<ul>
<li class="page_item page-item-386">
<a>item 1</a>
</li>
<li class="page_item page-item-224">
<a>item 2</a>
</li>
<li class="page_item page-item-417">
<a>item 3</a>
</li>
<li class="page_item page-item-559 current_page_ancestor current_page_parent">
<a>item 4</a>
<ul>
<li class="page_item page-item-520">
<a>item 4.1</a>
</li>
<li class="page_item page-item-523">
<a>item 4.2</a>
</li>
<li class="page_item page-item-593">
<a>item 4.3</a>
</li>
<li class="page_item page-item-529 current_page_item">
<a>item 4.4</a>
</li>
<li class="page_item page-item-595">
<a>item 4.5</a>
</li>
</ul>
</li>
<li class="page_item page-item-559">
<a>item 5</a>
<ul>
<li class="page_item page-item-520">
<a>item 5.1</a>
</li>
<li class="page_item page-item-523">
<a>item 5.2</a>
</li>
<li class="page_item page-item-593">
<a>item 5.3</a>
</li>
</ul>
</li>
</ul>
