2016-12-20 5 views
0

Я не очень хорошо знаком с JavaScript, но мне нужна помощь в выпадающем меню, изначально построенное только с использованием CSS. Когда страница была разработана, у нас был разработчик добавить JavaScript для автозаполнения в элементах списка (li), используя информацию, хранящуюся в нашем .js-файле.Выпадающее меню CSS - с JavaScript

При нажатии ссылки JavaScript не полностью обновляют страницу. Ссылки просто извлекают контент из нашего .js-файла и обновляют содержимое на странице. Он не закрывает выпадающее меню. Как получить раскрывающееся меню для обхода щелчка?

Это код для первой половины нашего текущего (рабочего) навигатора.

<div class="row" style="padding-bottom: 15px; z-index: 3;"> 
     <div class="col-lg-12 topmenu" ng-controller='HeaderCtrl' top-nav=''> 

       <ul> 
        <li class="drop"> 
        <a href="#">Color</a> 
        <ul class="hiddennav three-col"> 
         <!-- <ul class='colors-ul'> --> 
         <li ng-repeat='color_name in uniq_colors'> 
         <a ng-bind='color_name' ng-href='#/?color={{color_name}}'></a> 
         </li> 
        </ul> 
        </li> 
+1

Вам нужно будет предоставить дополнительную информацию о вашем коде. Каков подход, используемый для показа/скрытия выпадающего списка? Это все еще только CSS или JavaScript/jQuery? Если CSS, пожалуйста, укажите фрагмент таблицы стилей, иначе укажите, как это делается. – Siavas

+0

Не могли бы вы поделиться соответствующим CSS или создать JSFiddle. Я не могу позаботиться о части Javascript. –

ответ

1

Вам необходимо остановить событие по умолчанию тега привязки. Вы можете либо удалить href = "#", либо вызвать вызов .preventDefault() в таком случае:

document.querySelector('your-selector').onclick = function(Event) { 
    Event.preventDefault(); 
    // do the things 

}); 
Смежные вопросы