2

オプションのレイアウトを変更することはできますか？6つのオプション（言語）があり、3つのアイテムしか行かないようにレイアウトを作成したいと思います。「optionstodisplay：inline;」を入力すると、すべてのオプションが1行になります。これを変更するにはjavascrtiptを使用する必要がありますか？変更方法がわかりません。javascriptの経験があまりありません。

私はそれを次のように見せようとしています：

ここに画像の説明を入力してください

Joomla2.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>

これは、画像の「デフォルト」のビューです。ドロップダウンにするオプションもありますが、行に1つのラングのみ、または行にすべてのラングがあります。それで、多分私はカスタムリンクを追加する必要があり、このモジュールを使用しない必要がありますか？たぶん、私はこれらのリンクを私が望むようにレイアウトできず、uが示したように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」の下に余分な 2 行の言語があることに注意してください。

使用したCSSはこちら。主なトリックは、「display: none;」を使用する hidelangs クラスです。他の 2 行の言語を非表示にします。また、「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 のトグルクラス):

$(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 に答える