我有一個帶有三個菜單及其消息的導航欄。我正在主菜單單擊上實現顯示/隱藏消息。我能夠使第一個菜單處于活動狀態并顯示/隱藏消息，但是如何使第一條消息處于活動狀態（顯示默認值及其菜單），這就是我遇到的問題。我的 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");})在這種情況下，第一個菜單處于活動狀態，而消息僅在單擊時顯示。如何使第一條消息處于活動狀態或如何默認顯示第一條消息及其菜單。
1 回答
躍然一笑
TA貢獻1826條經驗 獲得超6個贊
根據你的問題，我的理解是，
您希望第一個菜單在第一次加載時打開，如果是您需要的情況，您需要稍微更改一下，從 jQuery 代碼中刪除隱藏行，并通過在其上應用 css 使 msg div 消失。然后僅在第一個 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 關注
- 143 瀏覽
添加回答
舉報
/150
提交
取消