Question

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

在一个页面上有一个项目列表。当点击其中一个项目时，它会使用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的链接列表一样，这样当从下拉列表中选择一个项目时，它会触发正确的面板加载？

Answer 1

假设您的下拉列表如下：

<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();
});

将列表更改为下拉列表并在jQuery中单击选项

1 个答案: