Bootstrap如何在下拉菜单关闭时刷新页面

时间:2022-08-26 20:49:35

How do I refresh the page when user close the drop down menu on click outside of it.

当用户在其外部单击下拉菜单时,如何刷新页面。

UPDATE

 <li class="dropdown" id="u_pic_link">
                        <script>
                            $('#u_pic_link').on('hidden.bs.dropdown', function () {
                                    window.location.reload();
                                  })
                        </script>

2 个解决方案

#1


4  

You can use the hide.bs.dropdown or hidden.bs.dropdown events...

您可以使用hide.bs.dropdown或hidden.bs.dropdown事件......

<ul class="nav navbar-nav">
   <li class="dropdown user-dropdown" id="u_pic_link">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
         <li>...</li>
      </ul>
   </li>
</ul>

$('#u_pic_link').on('hidden.bs.dropdown', function () {
  window.location.reload();
})

DEMO


If for whatever reason you need to place your javascript before the element you must use jQuery's document.ready event...

如果由于某种原因你需要在你的元素之前放置你的javascript,你必须使用jQuery的document.ready事件......

$(document).ready(function() {
    $('#u_pic_link').on('hidden.bs.dropdown', function () {
        window.location.reload();
    })
})

#2


4  

You can listen for an event which gets fired when the dropdown is hidden.

您可以侦听隐藏下拉列表时触发的事件。

$('#myDropdown').on('hide.bs.dropdown', function () {
 // do something…
  window.location.reload();
 });

Official bootstrap documentation http://getbootstrap.com/javascript/#dropdowns

官方引导文档http://getbootstrap.com/javascript/#dropdowns

Hope this helps

希望这可以帮助

#1


4  

You can use the hide.bs.dropdown or hidden.bs.dropdown events...

您可以使用hide.bs.dropdown或hidden.bs.dropdown事件......

<ul class="nav navbar-nav">
   <li class="dropdown user-dropdown" id="u_pic_link">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
         <li>...</li>
      </ul>
   </li>
</ul>

$('#u_pic_link').on('hidden.bs.dropdown', function () {
  window.location.reload();
})

DEMO


If for whatever reason you need to place your javascript before the element you must use jQuery's document.ready event...

如果由于某种原因你需要在你的元素之前放置你的javascript,你必须使用jQuery的document.ready事件......

$(document).ready(function() {
    $('#u_pic_link').on('hidden.bs.dropdown', function () {
        window.location.reload();
    })
})

#2


4  

You can listen for an event which gets fired when the dropdown is hidden.

您可以侦听隐藏下拉列表时触发的事件。

$('#myDropdown').on('hide.bs.dropdown', function () {
 // do something…
  window.location.reload();
 });

Official bootstrap documentation http://getbootstrap.com/javascript/#dropdowns

官方引导文档http://getbootstrap.com/javascript/#dropdowns

Hope this helps

希望这可以帮助