Question

所以我点击了一个按钮，切换了ul的可见性。我的按钮元素是我的页脚的子项，它固定在我的屏幕底部。我遇到的问题是，当切换时，ul向下扩展而不是向上扩展。我将如何从底部开始使用第一个li项目向上扩展我的ul，每个后续的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'
        });
 });

Here's a JSFiddle

Answer 1

如果我理解你的问题，你只需要颠倒列表的顺序。如果内容是动态生成的，那么您可以在输出<li>标记时执行此操作。否则this JSFiddle中的JS可以完成同样的事情。

我还将按钮移动到列表下方以匹配您的绘图。

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

1 个答案: