jquery隐藏/显示子菜单，同时保持第一个子菜单与主菜单一起活动

Question

我有一个带有三个菜单及其消息的导航栏。我正在主菜单单击上实现显示/隐藏消息。我能够使第一个菜单处于活动状态并显示/隐藏消息，但是如何使第一条消息处于活动状态（显示默认值及其菜单），这就是我遇到的问题。

我的 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");

})

在这种情况下，第一个菜单处于活动状态，而消息仅在单击时显示。如何使第一条消息处于活动状态或如何默认显示第一条消息及其菜单。

Answer 1

根据你的问题，我的理解是，您希望第一个菜单在第一次加载时打开，如果是您需要的情况，您需要稍微更改一下，从 jQuery 代码中删除隐藏行，并通过在其上应用 css 使 msg div 消失。然后仅在第一个 msg div 上添加 active 类，并使其仅通过 CSS 可见。//add remove class&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(".nav li a").on("click",function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(".nav li a").removeClass("active");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).addClass("active");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".nav li a").not(this).next().slideUp();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).next().slideToggle();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});.msg {&nbsp; display: none;}.msg.active {&nbsp; display: block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="nav justify-content-center ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item active main-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link active" href="#">Mango</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="msg active"><p class="position">You selected Mango</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item active main-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link " href="#">Banana</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="msg"><p class="position">You selected Banana</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item active main-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link " href="#">Grapes</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="msg"><p class="position">You selected Grapes</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li></ul>