Добавление нескольких пользовательских атрибутов к элементам, когда ширина устройства имеет определенный размер

0

Рассмотрим следующий 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>

Но, я немного запутался в том, что эта функция должна проверять? Я думаю, что приведенная ниже ссылка предлагает хороший подход, но большая помощь будет высоко оценена. Благодарю!

jquery, если ширина меньше, измените это attr

  • 0
    Ссылка, которую вы предоставляете, в значительной степени подводит итог того, как вы можете сделать это с помощью JS. Но, честно говоря, я бы не стал проверять размер экрана с помощью JS. Используйте медиа-запросы
  • 0
    Спасибо NULL. Мне известно об использовании медиазапросов для применения различных свойств стиля к элементам, и я делал это раньше. Я не знаю о добавлении или удалении атрибутов динамически с помощью медиа-запросов. Если есть способ сделать это, пожалуйста, поделитесь. Ура!
Показать ещё 2 комментария
Теги:
resize

1 ответ

0
Лучший ответ

Вы очень близки.

$(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

У вас никогда не должно быть более одного элемента с одним и тем же идентификатором. Если вы намерены иметь несколько элементов с одним и тем же идентификатором, вы должны изменить идентификатор на класс.

  • 0
    Спасибо! Это то, что я искал. Я понял, что хочу, чтобы это выполнялось после загрузки страницы, а не при изменении ее размера, потому что вы не можете изменить размер браузера на телефоне, поэтому я использовал вместо этого $ (document) .ready.
  • 0
    Я также изменил #mainLink на .mainLink. Еще раз спасибо, Тимс!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню