用動畫展開/折疊菜單列表

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 屬性，但沒有奏效。

另外，關於標記和 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>

如果我誤解了，我希望這篇文章（至少）能給你一些想法。