Avoid having to double-click to toggle Bootstrap d

2019-02-05 12:15发布

站内问答 / JavaScript
1852 6 4

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...

Is there any way to fix that?

6条回答
做自己的国王
2楼-- · 2019-02-05 12:34

In my case, the other answers don't work.

In application.js, I had:

//= require popper.min
//= require bootstrap-sprockets

Removing bootstrap-sprockets fixed the problem.

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
3楼-- · 2019-02-05 12:37

If someone is using angular with ui-bootstrap module along with normal bootstrap HTML dropdown definition, there are also two clicks needed.

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=> Removing the data-toggle="dropdown" will fix the issue.

Opening the dropdown with one click will work after this.

Reference: https://github.com/angular-ui/bootstrap/issues/2294

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
4楼-- · 2019-02-05 12:38

In Bootstrap 4, bootstrap.min.js and bootstrap.bundle.min.js now conflict in dropdown.

By removing bootstrap.min.js, the dropdown double click issue will resolved.

查看更多
0人赞 添加讨论(0) 举报
走好不送
5楼-- · 2019-02-05 12:51

This happens because the Twitter Bootstrap syntax for their drop downs include a href tag. You will need to preventDefault and stopPropagation to prevent this from happening. Something like this will do the trick:

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});
查看更多
0人赞 添加讨论(0) 举报
女痞
6楼-- · 2019-02-05 12:52

By looking within the source code of angular.ui.bootstrap and the native bootstrap.js they have both handlers for dropdowns.

Proposed Solution: adjust angular.ui.bootstrap dropdownToggle directive restrict only to "A" attributes. so by resolving this issue you need to modify dropdownToggle restrict "CA" into "A" this will hide Class looker from angular.ui.bootstrap which has been already handled by bootstrap.js

for the minified version of angular.ui.bootstrap look for this line directive("dropdownToggle",function(){return{restrict:"CA",require:"?^dropdown",link:function(a,b,c,d){

replace "CA" with "A".

Cheers

|improve this answer
1

I had the same issue as jaybro in https://stackoverflow.com/a/27278529/1673289, however their solution didn't help.

The way to fix for both cases was to add:

data-disabled="true"

onto the element which has the data-toggle="dropdown" attribute.

|improve this answer
  • not working.... – waza123 May 17 '18 at 10:22
0

I found that on some pages I would have to double click and other pages were single click.

Removing data-toggle="dropdown" made the double clicks into single and broke the singles.

I compared the html in the dev tool (because the same html is being served) and found on my double click pages the div with data-toggle looked like this: 

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
     aria-haspopup="true" aria-expanded="false">

But the single click html looks like this:

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">

So, in the document ready, I used attr detection and the prevent default answer and it made my double click opens into single click opens:

if (!($('#notifications').attr('aria-haspopup') == undefined &&
    $('#notifications').attr('aria-expanded') == undefined))
{
    $('.dropdown-toggle').click(function (e) { return false; });
}
|improve this answer
0

This may also happen if you have more than one bootstrap.js files! Check if you still have an older version and remove that script.

|improve this answer
0

In BootStrap 4, One should not include both "bootstrap.bundle.min.js" and "bootstrap.min.js". This will cause the DropDown issue. Only Keep "bootstrap.bundle.min.js" as it will have all required code.

|improve this answer

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.

查看更多
0人赞 添加讨论(0) 举报
Viruses.
7楼-- · 2019-02-05 12:53

This may happen if somehow Bootstrap is included twice in your project.

If bootstrap.min.js and bootstrap.bundle.min.js(bootstrap and popper js) both included in project, it means redundant bootstrap js.

The js combination should be like this: Either : bootstrap.bundle.min.js only Or : bootstrap.min.js AND popper.min.js For detailed information, visit https://getbootstrap.com/docs/4.1/getting-started/contents/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)