3

私はレスポンシブを構築しているサイトを持っています。

1 ページに項目のリストがあります。項目の 1 つをクリックすると、jQuery を使用してパネルが開き、画像が表示されます。ここに私のHTMLがあります:

<h2>See the options</h2>
    <ul class="list">
        <li id="click_item1">List Item 1</li>
        <li id="click_item2">List Item 2</li>
    </ul>

...そしてそれを機能させるjQueryコード：

    jQuery('#click_item1').click(function()
 {
    jQuery(".togglepanel:visible").hide();
    jQuery("#panel_item1").fadeIn();
});

jQuery('#click_item2').click(function()
 {
    jQuery(".togglepanel:visible").hide();
    jQuery("#panel_item2").fadeIn();
});

ここで実際の例とコードを参照してください: http://jsfiddle.net/5B8s5/1/

小さい画面でサイトを閲覧する際に、リストをドロップダウンに変更したい。その部分は簡単です。問題は、ドロップダウンから項目が選択されたときに正しいパネルがロードされるように、jQuery の利点のためにドロップダウン内の項目をリンクのリストのように動作させるにはどうすればよいですか?

4

1 に答える 1

3

ドロップダウンが次のようになっていると仮定します。

<select id="items">
    <option id="option_item1">Item 1</option>
    <option id="option_item2">Item 2</option>
</select>

ドロップダウンの「変更」イベントを処理する必要があります。

jQuery("#items").change(function() {
    var item = jQuery("#items option:selected");
    jQuery(".togglepanel:visible").hide();
    jQuery("#" + item.attr("id").replace("option", "panel")).fadeIn();
});
于 2013-03-28T18:39:18.193 に答える