Не переходит по ссылке (выпдающее меню)

Создаю меню для выбора подпунктов

Код (CODE):

1. <? if ($this->countModules('service') ) : ?>
2.   <div id="dd" class="wrapper-dropdown-1" tabindex="1">
3.   <span>Выберите услугу</span>
4.   <jdoc:include type="modules" name="service" style="xhtml" />
5.   <!--<ul class="dropdown">
6.   <li><a href="/uslugi/nogtevoj-servis"><i class="fa fa-scissors"></i>Ногтевой сервис</a></li>
7.   <li><a href="#"><i class="fa fa-eraser"></i>Маникюр</a></li>
8.   <li><a href="#"><i class="fa fa-eraser"></i>Педикюр</a></li>
9.   </ul>-->
10.   </div>
11.   <? endif; ?>

Если раскомментировать строчки, то выбор есть. Но даже если вставить ссылку или нет в li, то перехода никакого нет.
Даже если внедряю ради этого модуль. Как мне переделать чтоб еще и выбор учитывался и переход был по ссылке?
Применяю для этого

Код (CODE):

1. /* --------  Для выпадающего списка --------- */
2.        function DropDown(el) {
3.          this.dd = el;
4.          this.placeholder = this.dd.children('span');
5.          this.opts = this.dd.find('ul.dropdown > li');
6.          this.val = '';
7.          this.index = -1;
8.          this.initEvents();
9.        }
10.        DropDown.prototype = {
11.          initEvents : function() {
12.            var obj = this;
13.  
14.            obj.dd.on('click', function(event){
15.              $(this).toggleClass('active');
16.              return false;
17.            });
18.  
19.            obj.opts.on('click',function(){
20.              var opt = $(this);
21.              obj.val = opt.text();
22.              obj.index = opt.index();
23.              obj.placeholder.text(obj.val);
24.            });
25.          },
26.          getValue : function() {
27.            return this.val;
28.          },
29.          getIndex : function() {
30.            return this.index;
31.          }
32.        }
33.  
34.        $(function() {
35.  
36.          var dd = new DropDown( $('#dd') );
37.   var dd = new DropDown( $('#ds') );
38.          $(document).click(function() {
39.            // all dropdowns
40.            $('.wrapper-dropdown-1').removeClass('active');
41.          });
42.  
43.        });
44.   /*------------------------------*/

 

Прежде чем сразу всех "обсирать", то хотя бы предложите нужный вариант
Мне нужно для https://prnt.sc/khpjfe
В самом модуле я выбираю нужный пункт https://prnt.sc/khpk0n
И в дополн. параметрах модуля устанавливаю необходимый класс dropdown у меню. Сейчас выборка идет нормально, показывается. А вот клик не срабатывает.
Что мог я нашёл. И оно мне нравиться. Есть лучшее решение, так покажите

 

И где разница? Это мой код, который и высылал ранее.

 

Уже с индексами игрался. http://arial.bget.ru

 

Уже лучше.
Если вписать что Вы прислали

Код (CODE):

1. $(document).ready(function(){
2.         $('.dropdown li a').on('click', function() {
3.             link_vpered  = $(this).attr('href');
4.             location = link_vpered ;
5.         });
6.     });

То у location выдает сбоку в менеджере кода "Только для чтения (read only)"
Ну это не ошибка в общем. Но вот выбранная услуга перестала показываться. А как сделать так, чтобы и выбранная услуга показывалась и переход был?

 

Непонятно. Так я выбираю к примеру "Ногтевой сервис". Он в начале появляется, а затем исчезает, но переход теперь на страницу (с заголовком) есть. Как сделать чтоб этот заголовок не исчезал в выбранном, а оставался?

 

Помогите его изменить чтоб и заголовок был и переход был