Как сделать конкретную букву или часть якорного тега, ссылающегося на href в адаптивном выпадающем меню - PullRequest
0 голосов
/ 04 марта 2019

Я новичок в веб-разработке, и я создаю адаптивную выпадающую панель навигации с Джекиллом, и я последовал за этим замечательным учебным пособием Tania Rascia .

Проблема в том, что нет ссылокв учебнике Tanias, поэтому, когда вы нажимаете на элемент, вы не будете перенаправлены на конкретную страницу.Что, конечно, не проблема, потому что вы можете просто вставить свои собственные hrefs.

Но у меня есть особая проблема с выпадающими меню.Так как все раскрывающиеся меню открываются, когда вы нажимаете на них, вы также автоматически нажимаете на ссылку, которая приводит вас к конкретной странице, даже если вы просто хотите видеть выпадающие элементы.Я знаю, что могу просто перестать использовать href, и проблем не возникнет, но я хочу, чтобы на самом деле можно было нажать «Услуги» или «Портфолио» и перейти на страницу, где перечислены эти элементы.Таня сделала эту маленькую стрелку Unicode в качестве индикатора того, что вы можете щелкнуть ссылку, чтобы открыть раскрывающийся список (он находится в SCSS).

Я сделал свой собственный codepen , где вы можете увидеть мою проблему,Если вы нажмете на выпадающее меню «Услуги» или «Портфолио», вы будете перенаправлены на wikipedia.org вместо просмотра выпадающих пунктов.

<a href="https://www.wikipedia.org">Services</a>

Есть ли вероятность, что я открою href только когда янажмите на само слово (например, «Услуги»), и в противном случае, если я щелкну на окружающем фоне или маленькой стрелке, я открою выпадающее меню?Если это невозможно, каков общий способ решения этой проблемы?

1 Ответ

0 голосов
/ 04 марта 2019

Проблема в том, что js отображает выпадающий список и редирект, все, что вам нужно сделать, это добавить html-тег и перенаправить его.

Вот ваш код с необходимой модификацией https://codepen.io/anon/pen/NJrZwE

Js part
$('#wiki').on('click', () => {
   document.location.href = "https://en.wikipedia.org";
});

Html part
<a href="#!"><span id="wiki">Portfolio</span></a>
      <ul class="nav-dropdown">
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...