Bootstrap dropdown menu gaat niet meer weg

Door Henk de Vries op 23-08-2015 23:48

1.792 views

Hallo,

Ik werk aan een project waarbij ik informatie ophaal van een externe source aan de hand van een zoekwoord. Ik krijg de data binnen, en ik krijg het ook voor elkaar om deze data in de Bootstrap dropdown lijst te krijgen, maar ik kan de dropdown lijst niet meer wegkrijgen. Ik kan de dropdownlijst met $(".dropdown-menu").dropdown('toggle'); voor de dag halen, maar als ik diezelfde functie nogmaals aanroep blijft de lijst gewoon staan.

Hier is de code:

Jquery:


$(document).ready(function(){
            $('button[data-toggle]').on('click',function( event ){
                event.preventDefault()
                var str = $("#str").val();
                $.ajax({
                    url: "ajax/searchVideosOnYT.php",
                    method: "post",
                    success: function(data){

                        $(".dropdown-menu").empty();

                        $.each(data, function (i, item) {
                            $('.dropdown-menu').append('<li><a href="' + item.videoId + '"><img src="'+item.thumbnail+'" />'  + item.title + '</a></li>');
                        });

                        $(".dropdown-menu").dropdown('toggle'); //werkt!
                    },
                    error: function(data){
                        alert("fout!!!");
                    },
                    dataType: "json",
                    data: {SearchString: str}
                });
            });
        });

       $(document).ready(function(){
            $("ul.dropdown-menu a").click(function(event) {
                event.preventDefault()
                $(".dropdown-menu").dropdown('toggle'); //werkt niet!
            });
        });

het dropdown menu:


<h2>Search field</h2>
        <form id="search_video" action="" method="POST">
            <div class="input-group stylish-input-group">
                <input type="text" class="form-control"  placeholder="Search" name="str" id="str">
                <span class="input-group-addon">
                    <button class="dropdown-toggle" data-toggle="dropdown" type="submit" value="search">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
            <div class="dropdown">
                <ul class="dropdown-menu"></ul>
            </div>
        </form>

Nu wil ik graag dat het menu bij de volgende acties weer sluit:
- Als de bezoeker op een link klikt in het menu
- Als de bezoeker waar dan ook buiten het menu klikt

Ik weet dat dit eventueel ook op te lossen is door het menu op hidden te zetten met JQuery, maar ik los het liever op door de Bootstrap functies te gebruiken.

[size=xsmall]Toevoeging op 24/08/2015 01:37:33:[/size]

Ik heb het al opgelost door $(".dropdown-menu").hide(); te gebruiken

$(document).ready(function(){ $("ul.dropdown-menu a").click(function(event) { event.preventDefault() $(".dropdown-menu").dropdown('toggle'); //werkt niet! }); });

$(document).ready(function(){ $("ul.dropdown-menu a").on('click', function() { $(".dropdown-menu").fadeOut(500); }); $("body, html").on('click', function() { $(".dropdown-menu").fadeOut(500); }); });