选择选项的布局

Question

是否可以更改选项的布局？ 我有6个选项（语言）和Id喜欢制作布局，行中只有三个项目。如果我把“选项显示：内联;那么所有选项都在一行中。 我需要使用javascrtipt来改变这个吗？无法弄清楚如何改变它。我在javascript方面不是很有经验。

我试着让它看起来像这样：

我正在使用Joomla 2.5和语言选择器模块。

<ul class="lang-inline">
<li class="" dir="ltr">
<a href="#"> ENG </a>
</li>
<li class="" dir="ltr">
<a href="#"> FIN </a>
</li>
<li class="" dir="ltr">
<a href="#"> RUS </a>
</li>
</ul>

这是图片上的“默认”视图。也可以选择下拉，但是行中只有一个lang或行中的所有lang。 那么也许我需要添加自定义链接而不是使用此模块？也许那时我不能像我想要的那样布局这些链接并像你所展示的那样使用javascsript？

Answer 1

我相信这就像你想要的那样：

以下是我用来模拟图片之类的HTML。我在按钮中使用了“V”以避免从某处加载图形，但是你明白了。

<div>
    <div class="langs"><span>ENG</span><span>FIN</span><span>RUS</span></div><div class="sbtn">V</div>
</div>
<div id="morelangs" class="hidelangs">
    <div class="langs">
        <div><span>ENG</span><span>FIN</span><span>RUS</span></div>
        <div><span>ENG</span><span>FIN</span><span>RUS</span></div>
    </div>
</div>

请注意“morelangs”下的额外两行语言。

这是我使用的CSS。主要技巧是hidelangs类，它使用“display：none;”隐藏其他两行语言。另外，我使用“display：inline-block;”允许水平堆叠一些div元素。

.hidelangs {
    display: none;
}
.langs {
    display: inline-block;
}
.langs span {
    background-color: #555555;
    color: white;
    padding: 4px;
    font-size: 80%;
    margin: 0;
}
.sbtn {
    background-color: #999999;
    width: 30px;
    text-align: center;
    color: white;
    padding: 4px;
    font-size: 80%;
    margin: 0;
    display: inline-block;
}

JavaScript / jQuery仅用于处理按钮式div上的点击，并且它在点击时所做的全部是删除CSS类hidelangs（如果有），或者添加它（如果不存在）（jQuery中的toggleClass） ：

$(document).ready(function(e) {
    $(".sbtn").on("click", function(e) {
        $("#morelangs").toggleClass("hidelangs");
    });
});

使用jsFiddle here，这样你就可以看到它是如何工作的。单击“V”浅色按钮式div可以打开和关闭多余的线条。

您还可以将点击处理程序中的按钮内容切换为其他图像，如图所示，点击后箭头上下颠倒。

Answer 2

不，单独使用带有css的options元素是不可能的。我建议使用html，css和javascript。在你的html中使用UL元素，用一些css设置样式，并使用javascript来处理点击事件和可见性。