javascript - 使用动画展开/折叠菜单列表

Question

这是我正在尝试做的:

1. 点击“投资组合”；
2. 顺利地插入一切；
3. 新链接顺利淡入；
4. 再次点击“PORTFOLIO”，反向操作；

我当前的代码；

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

		if ($object) {
		if ($object.hasClass(className)) {
			$object.removeClass(className)
	    } else {
			$object.addClass(className)
			}
		}
	});
	});

	#list{
		display: none;
	}

	#list.open{
		display: block;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	    <ul>
	        <li><a href="#">Home</a></li>
	        <li><a href="#">A Empresa</a></li>
	        <li><a href="#" class="hide" data-toggle="#list">Portfolio</a>
	            <ul id="list">
	                <li><a href="#">Comerciais</a></li>
	                <li><a href="#">Residenciais</a></li>
	                <li><a href="#">Institucionais</a></li>
	                <li><a href="#">Edifícios</a></li>
	            </ul>
	        </li>
	        <li><a href="#">Contato</a></li>
	    </ul>
	</nav>

不使用 JS，只使用 CSS 可以实现吗？我完全不知道如何制作动画部分，我尝试了 CSS Transitions property，但没有成功。

此外，关于标记和 JS 的任何提示？我认为我没有以“正确的方式”这样做……任何提示将不胜感激。

Answer 1

编辑:不要介意有人在评论中回答了您的问题。

我不确定我是否完全理解您的问题，因为看起来您的代码运行良好。

我认为，如果您不想更改 + 和 - 的文本，您可以添加一个新的元素/标签，在列表项的末尾显示它。

我不太喜欢 JS，但是 text() 或 html() 可以在列表文本中的跨度上使用，这样它就不会被更改。

HTML:

<nav>
<ul>
    <li>Home</li>
    <li>A Empresa</li>
    <li><a href="#" id="item3link" style="text-decoration: none; text-color:Black;">Portfolio <span id="item3icon">+</span></a>
        <ul id="list" class="subClassHide">
            <li>Comerciais</li>
            <li>Residenciais</li>
            <li>Institucionais</li>
            <li>Edifícios</li>
        </ul>
    </li>
    <li>Contato</li>
</ul>

JS:

$('#item3link').on('click', function(){
if (toggleOn == 1) {
    toggleOn = 0;
    $('#item3icon').html('+');
    $('#list').addClass("subClassHide");
}
else
{
    toggleOn = 1;
    $('#item3icon').html('-');
    $('#list').removeClass("subClassHide");
}
});
var toggleOn = 0;

CSS: (我改了一点，但不重要，只是接近我本地的解决方案)

.subClassHide {
display: none;
}

$('#item3link').on('click', function() {
  if (toggleOn == 1) {
    toggleOn = 0;
    $('#item3icon').html('+');
    $('#list').addClass("subClassHide");
  } else {
    toggleOn = 1;
    $('#item3icon').html('-');
    $('#list').removeClass("subClassHide");
  }
});

var toggleOn = 0;

.subClassHide {
  display: none;
}

@import url(http://fonts.googleapis.com/css?family=Lato:900);
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  -webkit-highlight: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  font-size: 16px;
  -webkit-transition: all .15s ease;
}

body {
  font-family: 'Lato', Arial, sans-serif;
  text-transform: uppercase;
}

a {
  color: inherit;
  text-decoration: none;
}

nav {
  margin: .5em;
  padding: .5em;
}

nav:before,
nav:after {
  content: '';
  display: block;
  background: #000;
  height: .3em;
  width: 1.2em;
}

nav ul {
  list-style: none;
}

nav>ul>li {
  cursor: pointer;
  line-height: 1.8em;
}

#list li {
  color: #800;
  font-size: .7em;
  position: relative;
  margin-left: 1.5em;
}

#list li:after {
  content: '';
  display: block;
  background: #800;
  height: 2px;
  width: .4em;
  position: absolute;
  top: 50%;
  left: -.8em;
}

#list.open {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>Home</li>
    <li>A Empresa</li>
    <li><a href="#" id="item3link" style="text-decoration: none; text-color:Black;">Portfolio <span id="item3icon">+</span></a>
      <ul id="list" class="subClassHide">
        <li>Comerciais</li>
        <li>Residenciais</li>
        <li>Institucionais</li>
        <li>Edifícios</li>
      </ul>
    </li>
    <li>Contato</li>
  </ul>
</nav>

如果我误解了我希望这篇文章(至少)能给你一些想法。