See this fiddle

Question

我有选择列表：

<select id="category_list" name="aName">
<option value="#menu_1463">News 1</option>
<option value="#menu_1738">News 2</option>
<option value="#menu_1526">News 3</option>
</select>

每个值在我的结构中都有li：

<ul class="site_list">
    <li id="menu_1463">

        <h3>News 1</h3>

        <div class="site_list_box">

            <div class="img"><img src="image.jpg" alt=""></div>
            .....

        </li>

</ul>

现在，当我点击任何内容option时，请向下滑动到li。不过我想要的是，所有li都是display:none，并且点按option，display:block时会显示淡入淡出效果。

我该怎么做？

感谢。

Answer 1

See this fiddle

这应该给你一个粗略但合理的起点。

HTML

<select>
    <option value='item1'>Item 1</option>
    <option value='item2'>Item 2</option>
    <option value='item3'>Item 3</option>    
</select>


<ul>
    <li id='item1'>Item 1 Content</li>
    <li id='item2'>Item 2 Content</li>
    <li id='item3'>Item 3 Content</li>    
</ul>

CSS

ul{
    list-style:none;
    margin:0;
    padding:0;
}
ul li{
    display:none;
}

的jQuery

$('select').on('change', function(){
    $('li').hide();
    $('#'+$(this).val()).fadeIn();
})

如果您需要滚动到页面上的项目，也可以将其更改为：

$('select').on('change', function(){
    $('li').hide();
    $('#'+$(this).val()).fadeIn();
    $('html,body').animate({scrollTop: $('#'+$(this).val()).offset().top},'slow');
})

通过jQuery获取选项的价值

1 个答案:

See this fiddle