Javascript 如何让 twitter bootstrap 子菜单在左侧打开？

how to make twitter bootstrap submenu to open on the left side?

提问by kovpack

I was trying to create twitter bootstrap submenu in dropdown menu, but I've got a problem: I have dropdown menu in the top right corner of the page and that menu has one more submenu. However, when submenu opens - it does not fit in the window and goes too much to the right, so that user can see only first letters. How to make that submenu to open not to the right, but to the left?

我试图在下拉菜单中创建 twitter bootstrap 子菜单，但我遇到了一个问题：我在页面的右上角有下拉菜单，并且该菜单还有一个子菜单。但是，当子菜单打开时 - 它不适合窗口并且向右移动太多，因此用户只能看到第一个字母。如何使该子菜单不是向右打开，而是向左打开？

回答by Matt

If I've understood this right, bootstrap provides a CSS class for just this case. Add 'pull-right' to the menu 'ul':

如果我理解正确的话，bootstrap 就为这种情况提供了一个 CSS 类。将 'pull-right' 添加到菜单 'ul' 中：

<ul class="dropdown-menu pull-right">

..and the end result is that the menu options appear right-aligned, in line with the button they drop down from.

..最终结果是菜单选项显示为右对齐，与它们下拉的按钮一致。

回答by Schmalzy

The simplest way would be to add the pull-leftclass to your dropdown-submenu

最简单的方法是将pull-left类添加到您的dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle: DEMO

jsfiddle：演示

回答by Miljan Puzovi?

Curent class .dropdown-submenu > .dropdown-menuhave left: 100%;. So, if you want to open submenu on the left side, override those settings to negative left position. For example left: -95%;. Now you will get submenu on the left side, and you can tweak other settings to get perfect preview.

当前类.dropdown-submenu > .dropdown-menu有left: 100%;。因此，如果您想在左侧打开子菜单，请将这些设置覆盖到左侧的负位置。例如left: -95%;。现在您将在左侧看到子菜单，您可以调整其他设置以获得完美的预览。

Here is DEMO

这是演示

EDIT: OP's question and my answer are from august 2012. Meanwhile, Bootstrap changed, so now you have .pull-left class. Back then, my answer was correct. Now you don't have to manually set css, you have that .pull-left class.

编辑：OP 的问题和我的回答来自 2012 年 8 月。与此同时，Bootstrap 发生了变化，所以现在你有了 .pull-left 类。当时，我的回答是正确的。现在您不必手动设置 css，您拥有 .pull-left 类。

EDIT 2: Demos aren't working, because Bootstrap changed their URL's. Just change external resources in jsfiddle and replace them with new ones.

编辑 2：演示不起作用，因为 Bootstrap 更改了它们的 URL。只需更改 jsfiddle 中的外部资源并用新资源替换它们即可。

回答by Felipe Miosso

If you are using bootstrap v4 there is a new way to do that.

如果您使用的是 bootstrap v4，则有一种新方法可以做到这一点。

You should use .dropdown-menu-righton the .dropdown-menuelement.

您应该.dropdown-menu-right在.dropdown-menu元素上使用。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Link to code: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

代码链接：https: //getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

回答by Ruslan Sukhar

The correct way to do the task is:

完成任务的正确方法是：

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

回答by Mauro

If you have only one level and you use bootstrap 3 add pull-rightto the ulelement

如果您只有一个级别并且您使用 bootstrap 3 添加pull-right到ul元素

<ul class="dropdown-menu pull-right" role="menu">

回答by Mitchel Verschoof

I have created a javascript function that looks if he has enough space on the right side. If it has he will show it on the right side, else he will display it on the left side

我创建了一个 javascript 函数，用于查看右侧是否有足够的空间。如果有，他会在右侧显示，否则他会在左侧显示

Tested in:

测试于：

• Firefox (mac)
• Chorme (mac)
• Safari (mac)

• 火狐 (Mac)
• 合唱（mac）
• Safari (Mac)

Javascript:

Javascript：

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

because I don't want to add this fix on every menu items I created a new class on it. place the fixed-menu on the ul:

因为我不想在每个菜单项上添加此修复程序，我在其上创建了一个新类。将固定菜单放在 ul 上：

<ul class="dropdown-menu fixed-menu">

I hope this works out for you.

我希望这对你有用。

ps. little bug in safari and chrome, first hover will place it to mutch to the left will update this post if I fixed it.

附：safari 和 chrome 中的小错误，第一次悬停会将它放在左边的 mutch 如果我修复它会更新这篇文章。

回答by zeroasterisk

Actually - if you are ok with floating the dropdownwrapper - I've found it to be as easy as to add navbar-rightto the dropdown.

实际上 - 如果你可以浮动dropdown包装器 - 我发现它就像添加navbar-right到dropdown.

This seems like cheating, since it's not in a navbar, but it works fine for me.

这看起来像是作弊，因为它不在导航栏中，但对我来说效果很好。

<div class="dropdown navbar-right">
...
</div>

You can then further customize the floating with a pull-leftdirectly in the dropdown...

然后，您可以pull-left直接在dropdown...

<div class="dropdown pull-left navbar-right">
...
</div>

... or as a wrapper around it ...

...或作为它的包装...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

回答by isapir

If you're using LESS CSS, I wrote a little mixin to move the dropdown with the connecting arrow:

如果你使用的是 LESS CSS，我写了一个 mixin 来移动带有连接箭头的下拉列表：

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

Then to move a .dropdown-menuwith an id of dropdown-menu-xfor example, you can do:

然后移动一个.dropdown-menuiddropdown-menu-x例如，你可以这样做：

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

回答by SUAT SUPHI

I have created a javascript function that looks if he has enough space on the right side. If it has he will show it on the right side, else he will display it on the left side. Again if it has has enough space on the right side, it will show right side. it is a loop...

我创建了一个 javascript 函数，用于查看右侧是否有足够的空间。如果有，他会在右侧显示，否则他会在左侧显示。同样，如果右侧有足够的空间，它将显示右侧。这是一个循环...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});

});