Рассмотрим следующий html для ссылки в меню навигации:
<a id="mainLink" href="#");">A Main Link</a>
То, что я хотел бы сделать, - это когда ширина устройства составляет 320 пикселей или меньше, я хочу добавить пару атрибутов элементам с идентификатором mainLink, поэтому полученный код выглядит так:
<a data-toggle="collapse" data-target=".navbar-collapse" id="mainLink" href="#">A Main Link</a>
Мое мышление состояло в том, чтобы следовать некоторым примерам, которые я видел сегодня, и создать функцию:
<script type="text/javascript">
function addToggle () {
$(window).resize(function() {
$("#mainLink").attr('data-toggle', 'collapse');
$("#mainLink").attr('data-target', '.navbar-collapse');
});
}
</script>
Но, я немного запутался в том, что эта функция должна проверять? Я думаю, что приведенная ниже ссылка предлагает хороший подход, но большая помощь будет высоко оценена. Благодарю!
Вы очень близки.
$(window).on("resize", function () {
if($(window).width() <= 320) {
$("#mainLink").attr({
'data-toggle': 'collapse',
'data-target': '.navbar-collapse'
});
} else {
$("#mainLink").removeAttr('data-toggle data-target');
}
}
Я хочу добавить пару атрибутов в элемент s с идентификатором mainLink
У вас никогда не должно быть более одного элемента с одним и тем же идентификатором. Если вы намерены иметь несколько элементов с одним и тем же идентификатором, вы должны изменить идентификатор на класс.