3

我有一个网站，我正在构建响应式。

在一页上有一个项目列表。当单击其中一个项目时，它会打开一个使用 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 回答