blocks|key|265583|text|@skelly解决方案很好，但在移动设备上不起作用，因为悬停状态不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|265584|我添加了一点JS来恢复BS+2.3.2的行为。|265585|PS:它将与你得到的CSS一起工作：http://bootply.com/71520，不过你可以评论下面的部分：|offset|length|265586|CSS：|265587|/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/|code-block|syntax|javascript|265588|JS：|265589|$('ul.dropdown-menu+[data-toggle=dropdown]').on('click',+function(event)+{
++//+Avoid+following+the+href+location+when+clicking
++event.preventDefault();
++//+Avoid+having+the+menu+to+close+when+clicking
++event.stopPropagation();
++//+If+a+menu+is+already+open+we+close+it
++$('ul.dropdown-menu+[data-toggle=dropdown]').parent().removeClass('open');
++//+opening+the+one+you+clicked+on
++$(this).parent().addClass('open');
});|265590|结果可以在我的WordPress主题(页面顶部)上找到：http://shprinkone.julienrenaux.fr/|265591|entityMap|0|LINK|mutability|MUTABLE|url|http://bootply.com/71520|1|http://shprinkone.julienrenaux.fr/^0|0|0|I|O|0|0|0|0|0|0|S|Y|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|H|3|I|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1E|8|@]|9|@$F|1F|G|1G|1|1H]]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]]]

@skelly solution is good but will not work on mobile devices as the hover state won't work.

I have added a little bit of JS to get the BS 2.3.2 behavior back.

PS: it will work with the CSS you get there: <a href="http://bootply.com/71520">http://bootply.com/71520</a> though you can comment the following part:

CSS:

<pre><code>/*.dropdown-submenu:hover&gt;.dropdown-menu{display:block;}*/
</code></pre>

JS:

<pre><code>$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
 // Avoid following the href location when clicking
 event.preventDefault();
 // Avoid having the menu to close when clicking
 event.stopPropagation();
 // If a menu is already open we close it
 $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
 // opening the one you clicked on
 $(this).parent().addClass('open');
});
</code></pre>

The result can be found on my WordPress theme (Top of the page): <a href="http://shprinkone.julienrenaux.fr/">http://shprinkone.julienrenaux.fr/</a>

blocks|key|49060|text|Shprink的代码对我帮助最大，但为了避免下拉菜单在屏幕外消失，我将其更新为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|49061|JS：|49062|$('ul.dropdown-menu+[data-toggle=dropdown]').on('click',+function(event)+{
++++//+Avoid+following+the+href+location+when+clicking
++++event.preventDefault();+
++++//+Avoid+having+the+menu+to+close+when+clicking
++++event.stopPropagation();+
++++//+If+a+menu+is+already+open+we+close+it
++++$('ul.dropdown-menu+[data-toggle=dropdown]').parent().removeClass('open');
++++//+opening+the+one+you+clicked+on
++++$(this).parent().addClass('open');

++++var+menu+=+$(this).parent().find("ul");
++++var+menupos+=+$(menu).offset();

++++if+(menupos.left+%2B+menu.width()+>+$(window).width())+{
++++++++var+newpos+=+-$(menu).width();
++++++++menu.css({+left:+newpos+});++++
++++}+else+{
++++++++var+newpos+=+$(this).parent().width();
++++++++menu.css({+left:+newpos+});
++++}

});|code-block|syntax|javascript|49063|CSS:从背景颜色：#eeeeee到背景颜色：#c5c5c5+-白色字体和浅色背景看起来不太好。|49064|.nav+.open+>+a,
.nav+.open+>+a:hover,
.nav+.open+>+a:focus+{
++background-color:+#c5c5c5;
++border-color:+#428bca;
}|49065|我希望这对人们的帮助就像对我一样多！|49066|但我希望Bootstrap能尽快添加subs功能。|49067|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Shprink's code helped me the most, but to avoid the dropdown to go off-screen i updated it to:

JS:

<pre><code>$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
 // Avoid following the href location when clicking
 event.preventDefault(); 
 // Avoid having the menu to close when clicking
 event.stopPropagation(); 
 // If a menu is already open we close it
 $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
 // opening the one you clicked on
 $(this).parent().addClass('open');

 var menu = $(this).parent().find("ul");
 var menupos = $(menu).offset();

 if (menupos.left + menu.width() &gt; $(window).width()) {
 var newpos = -$(menu).width();
 menu.css({ left: newpos }); 
 } else {
 var newpos = $(this).parent().width();
 menu.css({ left: newpos });
 }

});
</code></pre>

CSS: FROM background-color: #eeeeee TO background-color: #c5c5c5 - white font &amp; light background wasn't looking good.

<pre><code>.nav .open &gt; a,
.nav .open &gt; a:hover,
.nav .open &gt; a:focus {
 background-color: #c5c5c5;
 border-color: #428bca;
}
</code></pre>

I hope this helps people as much as it did for me!

But i hope Bootstrap add the subs feature back ASAP.

blocks|key|49085|text|我为dropdown做了另一个解决方案。希望这是有帮助的，只需添加此js脚本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|49086|<script+type="text/javascript">+jQuery("document").ready(function()+{
++jQuery("ul.dropdown-menu+>+.dropdown.parent").click(function(e)+{
++++e.preventDefault();
++++e.stopPropagation();
++++if+(jQuery(this).hasClass('open2'))
++++++jQuery(this).removeClass('open2');
++++else+{
++++++jQuery(this).addClass('open2');
++++}

++});
});+<+/script>

<style+type="text/css">.open2{display:block;+position:relative;}</style>|code-block|syntax|javascript|49087|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I make another solution for dropdown. Hope this is helpfull
Just add this js script

<pre><code>&lt;script type="text/javascript"&gt; jQuery("document").ready(function() {
 jQuery("ul.dropdown-menu &gt; .dropdown.parent").click(function(e) {
 e.preventDefault();
 e.stopPropagation();
 if (jQuery(this).hasClass('open2'))
 jQuery(this).removeClass('open2');
 else {
 jQuery(this).addClass('open2');
 }

 });
}); &lt; /script&gt;

&lt;style type="text/css"&gt;.open2{display:block; position:relative;}&lt;/style&gt;
</code></pre>

blocks|key|49127|text|几天前我遇到了这个问题。我尝试了许多解决方案，但没有一个对我真正有效，最终我创建了一个bootstrap下拉代码的扩展/覆盖。它是原始代码的副本，但对closeMenus函数进行了更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|49128|我认为这是一个很好的解决方案，因为它不会影响bootstrap+js的核心类。|49129|你可以在gihub：https://github.com/djokodonev/bootstrap-multilevel-dropdown上查看它|offset|length|49130|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/djokodonev/bootstrap-multilevel-dropdown^0|0|0|A|1N|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

I bumped with this issue a few days ago. I tried many solutions and none really worked for me on the end i ended up creating an extenion/override of the dropdown code of bootstrap. It is a copy of the original code with changes to the closeMenus function. 

I think it is a good solution since it doesn't affects the core classes of bootstrap js. 

You can check it out on gihub: <a href="https://github.com/djokodonev/bootstrap-multilevel-dropdown" rel="nofollow">https://github.com/djokodonev/bootstrap-multilevel-dropdown</a>

blocks|key|49151|text|对Skelly's+really+helpful+workaround的评论:在Bootstrap-sass+3.3.6中，utilities.scss，第19行：.pull-left有float:left+!important。因此，我建议在他的CSS中也使用!important：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|49152|.dropdown-submenu.pull-left+{
++++float:none+!important;
}|code-block|syntax|javascript|49153|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/18024991/3111787^0|2A|A|2L|L|1|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

Comment to <a href="https://stackoverflow.com/a/18024991/3111787">Skelly's really helpful workaround</a>: in Bootstrap-sass 3.3.6, utilities.scss, line 19: <code>.pull-left</code> has <code>float:left !important</code>. Since that, I recommend to use !important in his CSS as well:

<pre><code>.dropdown-submenu.pull-left {
 float:none !important;
}
</code></pre>

blocks|key|49210|text|在Bootstrap+5中，由于新的autoClose选项，现在无需使用任何javascript代码就可以很容易地实现下拉子菜单。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|49211|现场演示：https://jsfiddle.net/42rx6sqp/|49212|.dropdown-menu+.dropdown-menu+{
++transform:+none+!important;
++top:+-.5rem+!important;
++left:+100%25+!important;
}|code-block|syntax|javascript|49213|<div+class="dropdown+m-5">
++<a+class="btn+btn-secondary+dropdown-toggle"+href="#"+role="button"+id="dropdownMenuLink"+data-bs-toggle="dropdown"+data-bs-auto-close="outside"+aria-expanded="false">
++++Dropdown+link
++</a>
++<ul+class="dropdown-menu"+aria-labelledby="dropdownMenuLink">
++++<li+class="dropdown">
++++++<a+class="dropdown-item"+href="#"+id="dropdownSubMenuLink"+data-bs-toggle="dropdown"+aria-expanded="false">Submenu+Action</a>
++++++<ul+class="dropdown-menu"+aria-labelledby="dropdownSubMenuLink">
++++++++<li><a+class="dropdown-item"+href="#">Another+action</a></li>
++++++++<li><a+class="dropdown-item"+href="#">Something+else+here</a></li>
++++++</ul>
++++</li>
++</ul>
</div>|49214|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/42rx6sqp/^0|I|9|0|5|U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

With Bootstrap 5, it's now very easy to implement dropdown submenu without using any javascript code thanks to the new <code>autoClose</code> option.
Live demo: <a href="https://jsfiddle.net/42rx6sqp/" rel="nofollow noreferrer">https://jsfiddle.net/42rx6sqp/</a>
<pre class="lang-css prettyprint-override"><code>.dropdown-menu .dropdown-menu {
 transform: none !important;
 top: -.5rem !important;
 left: 100% !important;
}
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;dropdown m-5&quot;&gt;
 &lt;a class=&quot;btn btn-secondary dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; id=&quot;dropdownMenuLink&quot; data-bs-toggle=&quot;dropdown&quot; data-bs-auto-close=&quot;outside&quot; aria-expanded=&quot;false&quot;&gt;
 Dropdown link
 &lt;/a&gt;
 &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuLink&quot;&gt;
 &lt;li class=&quot;dropdown&quot;&gt;
 &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; id=&quot;dropdownSubMenuLink&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;Submenu Action&lt;/a&gt;
 &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownSubMenuLink&quot;&gt;
 &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it

It was there in 2.x with class name as dropdown-submenu

Bootstrap dropdown sub menu missing

WordPress

jQuery

Bootstrap 3仍在RC中，但我只是在尝试实现它。我不知道如何放置子菜单类。即使css中没有类，甚至新的文档也没有对它做任何说明它出现在2.x中，类名为dropdown-submenu

问缺少引导程序下拉子菜单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缺少引导程序下拉子菜单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缺少引导程序下拉子菜单
EN