2015-03-12 4 views
0

У меня есть простой выпадающий список, который я хочу использовать в качестве языкового селектора, html-код отлично работает, но когда я добавляю скрипт ниже, href больше не работает , Когда мышь, я вижу ссылку, но клик не работает !!!!Ссылка href не работает после того, как я добавил javascript

вот мой код:

<body> 
     <div class="container"> 



      <section class="main"> 
       <div class="wrapper-demo"> 
        <div id="dd" class="wrapper-dropdown-2"> 
         <span>Deutsch</span> 
         <ul class="dropdown"> 
          <li><a href="http://www.bourax.com"><img src="./images/flags/flags_iso/32/de.png" >Deutsch</a></li> 
          <li><a href="#"><img src="./images/flags/flags_iso/32/en.png" >English</a></li> 

         </ul> 
        </div> 
       ​</div> 
      </section> 

     </div> 
     <!-- jQuery if needed --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script type="text/javascript"> 

      function DropDown(el) { 
       this.dd = el; 
       this.placeholder = this.dd.children('span'); 
       this.opts = this.dd.find('ul.dropdown > li'); 
       this.val = ''; 
       this.index = -1; 
       this.initEvents(); 
      } 
      DropDown.prototype = { 
       initEvents : function() { 
        var obj = this; 

        obj.dd.on('click', function(event){ 
         $(this).toggleClass('active'); 
         return false; 
        }); 

        obj.opts.on('click',function(){ 
         var opt = $(this); 
         obj.val = opt.text(); 
         obj.index = opt.index(); 
         obj.placeholder.text(obj.val); 
        }); 
       }, 
       getValue : function() { 
        return this.val; 
       }, 
       getIndex : function() { 
        return this.index; 
       } 
      } 

      $(function() { 

       var dd = new DropDown($('#dd')); 

       $(document).click(function() { 
        // all dropdowns 
        $('.wrapper-dropdown-3').removeClass('active'); 
       }); 

      }); 

     </script> 
    </body> 

JSFiddle

+0

Какое поведение вы ожидаете от ссылки? – Mouser

+0

просто для загрузки той же страницы с параметром $ language, www.mysite.com/index.php?lang=de –

+0

Изолированный код работает, чтобы изменить заголовок языка при нажатии: https://jsfiddle.net/hhb55k1r/ –

ответ

0

Это вызвано return false; утверждением в первом обработчике щелчка. Он не позволяет событию делать то, что он должен делать (подобно event.preventDefault(); при использовании jQuery).

Попробуйте удалить его, как это:

obj.dd.on('click', function(event) { 
    $(this).toggleClass('active'); 
    //return false; 
}); 
+0

Спасибо !!! ты спас мой день. Я знаю, что должен работать над своим JS. –

+0

Рад, что я мог бы помочь, ты же рад! –

Смежные вопросы