"可点击"下拉菜单 CSS

Question

你好，我只是想弄清楚这个示例菜单的概念

http://www.cdrking.com

它甚至是一个下拉菜单吗？很抱歉我有一个模糊的问题，我仍然对php和javascript的实现感到困惑。我正在尝试制作类似于他们的类别菜单的东西，这样右侧就会随着点击而更新。

有什么想法吗？

Answer 1

您需要一个"Accordion"菜单，如下所示-http://sandbox.scriptiny.com/javascript-accordion/

Answer 2

是的，您想使用jquery。如果搜索"jquery菜单"或"jquery下拉列表"之类的内容，您可能会找到一个已经编写好的插件。你会发现很多选择。

php和javascript之间的区别在于，最基本的答案是：php使用数据在页面加载之前进行更改，并与服务器/其他页面交互。Javascript即使在页面加载后也可以对其进行更改，但不会与服务器或其他页面交互。因此，任何类型的滑动或动画元素都可能是javascript或jquery（或flash或css3，但这完全是另一回事）。其他人可能会更深入或更准确地解释它，但我想保持它的基本性，因为听起来你才刚刚开始。

Answer 3

要实现它而不是悬停菜单，请更改代码：

:hover -> .clicked

并使用jQuery或vanillaJS在点击的元素上切换类：

$('#menu li').click(function() {
  $(this).toggleClass('clicked');
});

Answer 4

您可以使用jquery ui来组合一个漂亮的手风琴菜单。相比之下，实际上让这个看起来有点傻

http://jqueryui.com/demos/accordion/

这是在JSfiddle上http://jsfiddle.net/nMNaf/