Question

我正在尝试使用Jquery上下文菜单和Jqgrid。我能够在右键单击时获取上下文菜单选项，但我无法更改上下文菜单的默认样式。例如，如果我的上下文菜单选项他们在下一行中写下了一些我不想要的话......

这是HTML ..

<div class="contextMenu" id="myMenu1" style="display:none; width:auto;">
    <ul style="width: 200px">
     <li id="Reservation">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Reservation Options</span>
        </li>
        <li id="CheckIn">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">CheckIn</span>
        </li>
    </ul>
</div>

现在在上面的上下文菜单中，第一个选项Reservation Options我得到两行，我不想要.. 请帮我更新css.I试图增加ul列表的宽度，但它不起作用.. 感谢..

Answer 1

创建一个新的CSS文件并为其添加所有样式并包含该文件;

要覆盖内联样式，您必须使用!important;

.contextMenu
{
   /*Your context menu styling here*/
}

.contextMenu ul
{
   width: 500px !important; /*or Your desired width here */
}

.contextMenu ul li
{
   white-space: nowarp;
}

我希望这会对你有所帮助。

Answer 2

contextmenu有一个ClassName选项： http://swisnl.github.io/jQuery-contextMenu/docs.html#classname

$.contextMenu({
  className: 'contextmenu-customwidth'
});

然后使用css：

.contextmenu-customwidth {
  width: 31px !important;
  min-width: 30px !important;
}

宽度只是不起作用，你也需要min-width。

Answer 3

如果您具有级联风格的专业知识，只需打开它的css文件并相应地进行自定义。

如何更改jquery contextmenu的样式

3 个答案: