Twitter Bootstrap Question posted in

Close Twitter Bootstrap dropdown popover on click

I have the following HTML code:

<ul class="inline unstyled">
    <li class="select-value-li dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle select-value" data-placement="bottom">
            -- Select values to show --
            <b class="pull-right caret"></b>
        </a>
    </li>
</ul>

<div id="popover_select_values" style='display:none'>
    <ul class="scrollable-menu unstyled">
        <li>element 1</li>
        <li>element 2</li>
    </ul>
</div>

This is my jQuery code:

$(".select-value").popover({
    html: true,
    content: function() {
        return $("#popover_select_values").html();
    }
});

I want to close this dropdown when I click anywhere outside it.

$(document).on('click', function(e) {
    var isDropdown = $('.select-value-li.dropdown-open').length > 0;
    if (!isDropdown) {
        $('.select-value-li').slideUp();
    }
});

This is removing the entire dropdown. I cannot even see the select-values-to-show and the caret beside it. I just want to close the popover.

Check out this JSfiddle.

Tags:

3

Answers


  1. 0

    You can simply just call $(".select-value").popover('hide') to close your pop over

    Login or Signup to reply.
  2. 0

    It is better to use data-trigger="focus" attribute to auto-hide popover on focus lost. So you don’t need to add extra event-handlers.

    But it is better to use Dropdowns for this case. Check the link below:
    http://getbootstrap.com/javascript/#dropdowns

    Login or Signup to reply.
  3. 0

    Check out the following snippet: https://jsfiddle.net/e46tu6o3/6/

    $(document).on('click', function(e) {
    var isDropdown = $('.select-value-li.dropdown.open').length > 0;
    if (!isDropdown){
        $('.select-value').popover('hide');
    }
});

    Please be aware that clicking element 1 or 2 also closes the popover.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search