Question

我使用下拉菜单创建菜单。

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something that is a really really really long string here</a></li>
    <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try left</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">shorter things</a></li>
            <li><a tabindex="-1" href="#">shorter things</a></li>
            <li><a tabindex="-1" href="#">shorter things</a></li>
        </ul>
    </li>		
    <li class="divider"></li>
    <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">More else</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
        </ul>
    </li>
</ul>

{{1}}

如何更改下拉菜单中的侧向和方向箭头“向左试试”？

在这里演示http://jsfiddle.net/5BUXu/20/

P.S。希望在图片上获得相同的结果

Answer 1

你只需要'翻转脚本'。箭头位于引导程序CSS中的.dropdown-submenu>a:after { display: block; content: " "; float: left; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 5px 5px 0; border-right-color: #cccccc; margin-top: 5px; margin-left: -10px; }中，您需要重写它，翻转所有使其显示正确的内容，如下所示：

float

JSFiddle

因此现在border-right-width而不是正确，border-left-width现在是5px而不是margin-right，而margin-left现在是<li class="dropdown-submenu right-submenu"> <a tabindex="-1" href="#">。

如果一个项目有一个左箭头，一个项目有一个右箭头你需要添加一个类，或者当你知道项目的数量是固定的，你可以使用nth-child选择器。像这样：

With class added

.dropdown-submenu.right-submenu>a:after { display: block; content: " "; float: left; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 5px 5px 0; border-right-color: #cccccc; margin-top: 5px; margin-left: -10px; }

.dropdown-submenu:nth-child(4)>a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #cccccc;
    margin-top: 5px;
    margin-left: -10px;
}

With nth-child selector

dt2insert = data.frame(type = "Apple",
                       taste = "Sweet",
                       color = "Red",
                       stringsAsFactors = FALSE)
con = dbConnect(dbDriver("PostgreSQL"),dbname = "mydatabase",
                host = "localhost", port = 5432,
                user = "postgres") 
dbWriteTable(con, name = c("myschema","fruits"), value = dt2insert,append=TRUE,row.names=FALSE,overwrite=FALSE)
dbDisconnect(con)

如何更改下拉菜单中的侧箭头和方向箭头？

1 个答案: