更改单击按钮时ul展开的方向。

Question

因此，我得到一个按钮，当点击，切换一个ul的可见度。我的按钮元素是我的页脚的子元素，它被固定在我的屏幕底部。我的问题是，当切换时，ul向下扩展而不是向上扩展。我将如何使我的ul向上展开，第一个li项目从底部开始，每一个后续的li项都堆叠在前面的一个上面。

这是我的代码：

<footer class="web-stream">

    <button type="button" class="active-stream">All</button>

    <ul class="feed-list">
       <li>feed 1</li>
       <li>feed 2</li>
    </ul>

</footer>

CSS

.web-stream {
background: green; 
width: 100%
height: 2.3em; 

margin: auto;

position: fixed;
bottom:0%;
left:0px;
right:0px;
}

.active-stream {
width: 9.5em;
height: 2.3em;
text-align: center;
}

.feed-list {
display: none;
}

Jquery：

jQuery(document).ready(function(){
    jQuery(document).on('click','.active-stream', function(event) {        
        jQuery('.feed-list').toggle('fast');   //use 'slow'
        });
 });

这是一个JSFiddle。

Answer 1

如果我正确地理解了你的问题，你只需要颠倒列表的顺序。如果内容是动态生成的，那么在输出<li>标记时可以这样做。否则，这个JSFiddle中的JS可以完成相同的任务。

我还移动按钮显示在列表下面，以匹配您的绘图。