选择选项的布局答案

【问题标题】：Layout of select options选择选项的布局
【发布时间】：2012-09-25 17:08:05
【问题描述】：

是否可以更改选项的布局？我有 6 个选项（语言），我想这样布局，一行中只有三个项目。如果我将 "options to display:inline;" 放在一行中。我需要使用 javasctipt 来改变它吗？想不出怎么改。我对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>

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

【问题讨论】：

显示您的代码会很有帮助。
简短回答 - 是的，这是可能的。但！您的 HTML 看起来如何？你的 CSS 是什么？

标签： javascript html options

【解决方案1】：

不，仅使用带有 css 的选项元素是不可能做到这一点的。我建议使用 html、css 和 javascript。在您的 html 中使用 UL 元素，使用一些 css 对其进行样式设置，并使用 javascript 来处理点击事件和可见性。

【讨论】：

【解决方案2】：

我相信这就是你想要的：

这是我用来模拟您的图片之类的 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;”隐藏其他 2 行语言。另外，我使用“显示：内联块；”允许水平堆叠一些 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 以打开和关闭额外的行。

您还可以在单击处理程序中将按钮内容切换到不同的图像，因为在您的图片中，单击后箭头是倒置的。

【讨论】：