href link doesn't work after I added javascript

I have a simple drop down list that I want to use as language selector, the html code works fine but when I add the script below, the href don't work anymore. When mouse over, I can see the link but click doesn't work !!!!

here is my code :

<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

Solution

This is caused by the return false; statement in the first click handler. It prevents the event from doing what it is supposed to do (much like event.preventDefault(); when using jQuery).

Try to remove it, like this:

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