2

是否可以更改选项的布局？我有 6 个选项（语言），我想这样布局，这样一行中只有三个项目。如果我将“选项显示：内联；那么所有选项都在一行中。我需要使用 javasccrtipt 来更改它吗？不知道如何更改它。我对 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？

4

2 回答 2

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;” 隐藏其他 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 ，这样你就可以看到它是如何工作的。单击“V”浅色按钮状 div 以打开和关闭额外的行。

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

于 2012-10-04T16:27:01.267 回答
0

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

于 2012-10-04T16:14:13.807 回答