У меня есть вложенная структура меню ul, которая начинается следующим образом:
<div id="left">
<ul id="left-nav">
<li>
<a href="#">Link 1</a>
<ul class=".sub-nav">
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</li>
<li>
<a href="#">Link 2</a>
<ul class=".sub-nav">
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</li>
</ul>
</div>
Из-за требований к дизайну у меня должны быть все вложенные элементы за пределами их родителя.<li>
s и добавьте их в контейнер #left
с помощью jQuery. Я также сохраняю ссылку на каждый субнап, используя атрибуты id / data
var $left = $("#left");
$(".sub-nav").each(function(index) {
$(this).attr("id", "subnav" + index);
$(this).parent().data("subnav", index);
var offsetTop = $(this).parent().position().top;
$(this).css("top", offsetTop);
$(this).appendTo($left);
});
Вот итоговый HTML
<div id="left">
<ul id="left-nav">
<li>
<a href="#" data-subnav="subnav1">Link 1</a>
</li>
<li>
<a href="#" data-subnav="subnav2">Link 2</a>
</li>
</ul>
<ul class=".sub-nav" id="subnav1">
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
<ul class=".sub-nav" id="subnav2">
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</div>
Меню теперь работает отлично, но меня беспокоит тот факт, что я меняю структуру HTML и семантика отключена.Повлияет ли это на поисковые системы?Должны ли у меня быть какие-либо другие проблемы?