我正在尝试制作一个手机大小的响应菜单。我想要的是一个可折叠的导航菜单，例如：

• （未展开）按钮A
• （未展开）按钮B
• （可扩展）按钮C
• 按钮C选项A

因此，当您第一次看到菜单时，您只能看到按钮A、B和C。当您单击按钮C时，它的下方会出现（通过单击它）选项A。
目前为止，我有一个三行导航图标的按钮。当你点击它时，你会看到按钮a，b，c。但是当你点击按钮c时，整个列表会折叠回来，当重新打开时，你会看到完整的列表。这不是我想要的...
我的编码：HTML

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
        $(".text").hide();
        $(".accordeon div:first-child").addClass("expand_first");
        $(".expand").click(function() {
                $(".text").slideUp(500);
                if ($(this).next(".text").is(":visible")) {
                        $(this).next(".text").slideUp(500);
                } else {
                        $(this).next(".text").slideToggle(500);
                }
        });
});
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
$('ul li a').click(function() {
    $(this).parent().find('ul.sub-menu').toggle();
    return false;
});
</script>

<div id="nav-small">
        <div class="accordeon">
                <div class="expand"><img src="http://localhost:8080/wordpress/wp-content/uploads/2016/06/navicon.png" alt="Navigation" width="50%" height="auto" />
                      Navigation
                </div>
                <div class="text">      
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="sub-menu"><a href="#">Lifestyle</a>▼
                    <ul>
                        <li><a href="#">Cleaning & Organizing</a></li>
                        <li><a href="#">Health & Beauty</a></li>
                        <li><a href="#">Travel</a></li>
                    </ul>
                </li>
                </ul>

</div></div></div>

我的CSS：

#nav-small{
    width:100%;
    height:auto;
}
#nav-small img{
    width:50%;
    max-width:30px;
    max-height:30px;
}
#nav-small ul{
    list-style:none;
    padding:0;
    margin:0;
    font-family:verdana;
}
#nav-small ul li{
    text-align:center;
    text-decoration:none;
    padding: 2% 0;
    border-bottom:1px solid black;
}
#nav-small ul li a{
    text-decoration:none;
}
#nav-small ul li.sub-menu{
    border-bottom:none;
    padding-bottom:0;
}
.accordeon{
    text-align:center;
    background-color: rgba(104,144,192,1.00) ;
    width:100%;
}
.accordeon .expand {
    display:inline-block;
    width:30%;
    height:auto;
    margin:auto;
    font-family: Verdana;
    background-color: rgba(104,144,192,1.00) ;
    cursor:pointer;
    padding:1% 0;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
}
.accordeon .text{
        display:none;
    float:left;
        width:100%;
    height:auto;
    margin:auto;
        border-top:0px;
        border-bottom:1px solid #ccc;
        background-color: rgba(211,196,213,1.00);
    text-align:left;
}