javascript - 一列菜单，网页上点击某个菜单，别的已打开的菜单自动收起。

Question

要求是点击新菜单，别的公告简介自动收齐，然后下拉弹出我点击的那个公告的内容。

公告的内容会用vuejs的动态渲染生成，但是现在不知道怎么控制渲染的时候只让第一个显示和点击别的公告，别的公告自动收起。

以下是静态网页的源代码。

多谢各位啦~

<p class="card notice">
                <p class="card-header">
                    <span class="card-title-h1">公告</span>
                    <a href="#" class="fr link card-title-link">编辑</a>
                </p>
                <p class="notice-preview">
                    <p class="notice-header">
                        <span class="card-title-h2">十二月规划</span>
                        <span class="fr card-title-time">11月21日</span>
                    </p>
                    <article>
                        <p>
                            平时会有什么非常重要的事情，要这么严肃以公告的形式发布出来呢？
                            我也不知到，但是估计下来这里也可以放下很多的字吧，万一不够还可以省略掉是不是。
                            但是居然不能用sketch还得用上PS不过也就这样吧...
                        </p>
                        <a href="#" class="link fl notice-all">全部内容...</a>
                        <p style="clear: both;"></p>
                    </article>
                </p>
                <p class="notice-preview">
                    <p class="notice-header">
                        <span class="card-title-h2">十二月规划</span>
                        <span class="fr card-title-time">11月21日</span>
                    </p>
                </p>
                <p class="notice-preview">
                    <p class="notice-header">
                        <span class="card-title-h2">十二月规划</span>
                        <span class="fr card-title-time">11月21日</span>
                    </p>
                </p>
                <p class="notice-preview">
                    <p class="notice-header">
                        <span class="card-title-h2">十二月规划</span>
                        <span class="fr card-title-time">11月21日</span>
                    </p>
                </p>
                <p>
                    <p style="text-align: center;"><a href="#" class="link notice-more">查看更多……</a></p>
                </p>
            </p>
            <p class="card">
                <p style="text-align: center;">
                    <img src="img/releaseNotice.png" style="vertical-align: middle;"/>
                    <a href="#" class="link releaseNotice">发布公告</a>
                </p>
            </p>

Answer 1

有太多方法能实现，给你一个思路吧：

• 初始化2个函数
  function closeAll(){} //负责关闭所有的公告
  function show(index){} // 负责根据传入的索引展示对应的公告详情

• 那么，在点击公告时，首先调用closeAll()，然后调用show(index)则实现了关闭和打开的过程