jquery скрыть / показать подменю, оставляя активным первое подменю вместе с главным меню

Question

У меня есть навигационная панель с тремя меню и сообщениями. Я реализую сообщение показать / скрыть в главном меню нажмите. Я могу сделать первое меню активным и показать / скрыть сообщение, но как сделать первое сообщение активным (показать по умолчанию вместе с его меню), вот где у меня возникает проблема.

Мой Html is

<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 is:

//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 кода и заставить msg div исчезнуть, применив к нему css. а затем добавить активный класс только в первый msg div и сделать его видимым только 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>

Answer 2

только что добавил id #labl в сообщение div и сделал следующие изменения.

$(".lab .msg ").hide();
$(".lab #labL ").show();
$(".lab a").click(function () {
$(".lab .msg, .lab #labL").hide('fast');
$(this).parent().find("div").toggle("fast");
})  

Answer 3

Добавить CSS

.msg{
  display:none;
}
.active .msg{
  display:block;
}

https://jsfiddle.net/lalji1051/6Lj82emb/4/