Question

我想使用ul li ul创建通用树状菜单。而且我使用CSS制作了类似的东西：

CSS

.category-list {
}

.category-list li ul {
  display: none;
}

.category-list li:hover > ul {
  display: block;
}

HTML

<ul class="category-list">
  <li>
    <a href="" title="">Category 1</a>
    <ul>
      <li><a href="" title="">Sub-category 1</a></li>
      <li><a href="" title="">Sub-cateagory 1</a></li>
      <li><a href="" title="">Sub-category 1</a></li>
    </ul>
  </li>
  <li>
    <a href="" title="">Category 2</a>
    <ul>
      <li><a href="" title="">Sub-category 2</a></li>
      <li><a href="" title="">Sub-category 2</a></li>
      <li><a href="" title="">Sub-category 2</a></li>
    </ul>
  </li>
</ul>

https://jsfiddle.net/usz9ycmj/1/

- 我希望产生类似的效果，但点击后，只有当前点击的标签显示其父内容。对我来说更重要的是能够在特定操作上添加和删除类：

.category-list li.current -- while is currently clicked (active)

.category-list li -- removed while different li is clicked (active)

只是，触发器li有两种不同的状态，用于活动和非活动状态。它将颜色和箭头从关闭变为打开，让它看起来像树状菜单 - 我打赌你明白了。

如果有人有时间帮忙，我想要简单的jquery代码。感到宾至如归。

Answer 1

这是一个有效的代码。

请阅读评论，如果不清楚，请告诉我。

＆＃13;

// listen to the click event
var all_items = $('.category-list>li').click(function(event) {
  // stop the propagation - this will abort the function when you click on the child li
  event.stopPropagation();
  var elm = $(this);
  // remove the class from all the items
  all_items.not(elm).removeClass('current');
  // add class if it's not the current item
  elm.toggleClass('current', !elm.is('.current'));
});

＆＃13;

.category-list {
}

.category-list li ul {
  display: none;
}

.category-list li.current > ul {
  display: block;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<ul class="category-list">
  <li>
    <a href="#" title="">Category 1</a>
    <ul>
      <li><a href="#" title="">Sub-category 1</a></li>
      <li><a href="#" title="">Sub-category 1</a></li>
      <li><a href="#" title="">Sub-category 1</a></li>
    </ul>
  </li>
  <li>
    <a href="#" title="">Category 2</a>
    <ul>
      <li><a href="#" title="">Sub-category 2</a></li>
      <li><a href="#" title="">Sub-category 2</a></li>
      <li><a href="#" title="">Sub-category 2</a></li>
    </ul>
  </li>
</ul>

＆＃13;

http://jsbin.com/tocewe/edit?html,css,js

CSS和jQuery通用树菜单

1 个答案: