只需反转css：
CSS：

#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }

我希望我理解你的权利。我通常使用jquery这个...这里是一个小演示：HTML：

<a href="#" class="hide" data-toggle="#list">Toggle: show</a>
<ol id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

CSS：

#list {
  display: none;
}

#list.open {
  display: block;  
}

JS：

$('[data-toggle]').on('click', function(){
  var id = $(this).data("toggle"),
      $object = $(id),
      className = "open";

  if ($object) {
    if ($object.hasClass(className)) {
      $object.removeClass(className)
      $(this).text("Toggle: show");
    } else {
      $object.addClass(className)
      $(this).text("Toggle: hide");
    }
  }
});

TJL公司

您可能想给予这个简单的Javascript解决方案。
当单击某个组件时，可以调用一个方法，使特定元素在可见模式或折叠模式之间切换。
Javascript示例：

function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
}

您可以将该方法调用到 href 或 onclick 事件中。
原帖：snip2code - How to collapse a div in html

如果有人还在看的话，这里有一个简单的jQuery代码来展开和折叠任何东西，只要在变量声明中正确选择了元素。
我把你的id=“list”改为class=“list”。这样代码就可以用于多个有序列表。你可以把它保留为id，但是你需要为每个元素写一个单独的脚本。

<ol class="list">
    <li>
        <span class="menu glyphicon glyphicon-menu-down">&nbsp;MENU</span>
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
            <li>Menu Item 4</li>
        </ul>
    </li>
</ol>

<script>
    var $menu = $('ol.list li span.menu');
    $menu.next().hide();
    $menu.on('click', function () {
        $(this).toggleClass('glyphicon-menu-up glyphicon-menu-down').next().slideToggle();
    })
</script>

1.在上面的脚本代码中，我已经声明并初始化了我正在使用的变量，该变量指向任何包含有序列表的元素，该列表的类为list，但我已经深入到该元素中，以到达span和实际菜单。
1.当页面加载时，菜单会自动折叠。如果你想在页面加载时显示它，你需要删除$menu.next（）.hide（）行。你还需要翻转.toggleClass（）中出现的on click函数中的类。
1.然后使用变量onClick函数打开或展开您单击的有序列表。
1.同时，我切换类，根据菜单的状态（分别为展开或折叠）显示向上或向下的V形。
如果要在鼠标悬停在菜单上时展开或折叠菜单;您需要将脚本更改为：

<script>
    var $menu = $('ol.list li span.menu');
    $menu.next().hide();

    $menu.on('mouseover mouseout', function () {
        $(this).toggleClass('glyphicon-menu-up glyphicon-menu-down').next().slideToggle();
    })
</script>

它非常简单直接，你可以在任何你想显示和隐藏内容的地方使用它。正如你所看到的，它需要更少的代码，你不需要混乱的CSS，除非你想风格化你的菜单的外观。
试试吧！我希望这对某人有帮助。