我有一個(gè)帶有三個(gè)菜單及其消息的導(dǎo)航欄。我正在主菜單單擊上實(shí)現(xiàn)顯示/隱藏消息。我能夠使第一個(gè)菜單處于活動(dòng)狀態(tài)并顯示/隱藏消息，但是如何使第一條消息處于活動(dòng)狀態(tài)（顯示默認(rèn)值及其菜單），這就是我遇到的問題。我的 HTML 是<ul class="nav justify-content-center "> <li class="nav-item active main-menu"> <a class="nav-link " href="#">Mango</a> <div class="msg active"> <p class="position">You selected Mango</p> </div> </li> <li class="nav-item main-menu"> <a class="nav-link " href="#">Banana</a> <div class="msg"> <p class="position">You selected Banana</p> </div> </li> <li class="nav-item main-menu"> <a class="nav-link " href="#">Grapes</a> <div class="msg "> <p class="position">You selected Grapes</p> </div> </li></ul>JavaScript 是：//add remove class$(".nav li").on("click", function() { $(".nav li, .nav li a").removeClass("active"); $(this).addClass("active");})//show hide message$(".main-menu .msg ").hide();$(".main-menu a").click(function() { $(".main-menu .msg").hide('fast'); $(this).parent().find("div").toggle("fast");})在這種情況下，第一個(gè)菜單處于活動(dòng)狀態(tài)，而消息僅在單擊時(shí)顯示。如何使第一條消息處于活動(dòng)狀態(tài)或如何默認(rèn)顯示第一條消息及其菜單。
1 回答
躍然一笑
TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊
根據(jù)你的問題，我的理解是，
您希望第一個(gè)菜單在第一次加載時(shí)打開，如果是您需要的情況，您需要稍微更改一下，從 jQuery 代碼中刪除隱藏行，并通過在其上應(yīng)用 css 使 msg div 消失。然后僅在第一個(gè) msg div 上添加 active 類，并使其僅通過 CSS 可見。
//add remove class
$(".nav li a").on("click",function(){
$(".nav li a").removeClass("active");
$(this).addClass("active");
$(".nav li a").not(this).next().slideUp();
$(this).next().slideToggle();
});
.msg {
display: none;
}
.msg.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav justify-content-center ">
<li class="nav-item active main-menu">
<a class="nav-link active" href="#">Mango</a>
<div class="msg active"><p class="position">You selected Mango</p></div>
</li>
<li class="nav-item active main-menu">
<a class="nav-link " href="#">Banana</a>
<div class="msg"><p class="position">You selected Banana</p></div>
</li>
<li class="nav-item active main-menu">
<a class="nav-link " href="#">Grapes</a>
<div class="msg"><p class="position">You selected Grapes</p></div>
</li></ul>
- 1 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報(bào)
0/150
提交
取消