Question

这就是我想要做的：

Visual aid

点击“PORTFOLIO”;
顺利推倒一切;
新链接顺利淡入;
再次点击“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的适当性，但是没有用。

此外，有关标记和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;
}

JS Fiddle Modified Demo

如果我误解了，我希望这篇文章（至少）会给你一些想法。

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

1 个答案: