Изменение названия меню происходит только после первого раза

Question

У меня есть начальное меню. Если он рухнул, я хочу, чтобы у него было имя страницы, если оно открыто, я хочу, чтобы он называл меню.

На данный момент я назвал его «Watch the Trailer» (так предположите, где на этой странице). При нажатии кнопки меняется название, но оно работает только после первого раза. Почему это?

И мой подход хороший подход? Вот jsfiddle for convenience.

var menu_title = $(".so_menu_name").html(); 
 
    
 
$(".navbar button").on("click", function() { 
 
    var collapsed = $(".navbar button").hasClass("collapsed"); 
 
    if (!collapsed) { 
 
    $(".so_menu_name").html(menu_title); 
 
    } 
 
    else { 
 
    $(".so_menu_name").html("Menu"); 
 
    } 
 
});

.nav.navbar-nav .nav-item { 
 
     float: none; 
 
} 
 

 
.nav.navbar-nav .nav-item+.nav-item { 
 
     margin-left: 0; 
 
} 
 
.nav.navbar-nav .nav-link { 
 
     padding: .25rem 0; 
 
} 
 
.nav.os_menu { 
 
     border-top: 2px solid rgba(255, 255, 255, .5); 
 
     border-bottom: 2px solid rgba(255, 255, 255, .5); 
 
}

<div class="container"> 
 

 
    <nav class="navbar navbar-dark bg-inverse"> 
 
    <span class="so_menu_name">Watch the Trailer</span> 
 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">+</button> 
 

 
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar"> 
 

 
     <ul class="nav navbar-nav os_menu"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#">Watch the Trailer<span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Screening & Events</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Synopsis</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">The Protagonist</a> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    </nav> 
 

 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

В моем анализе могут возникнуть проблемы с плагином. Для первого щелчка он не добавляет или не удаляет класс с именем collapse.

Если вы используете его атрибут aria-expanded, вы можете решить эту проблему.

var menu_title = $(".so_menu_name").html(); 

$(".navbar button").on("click", function() { 
// var collapsed = $(".navbar button").hasClass("collapsed"); 
if ($(this).attr('aria-expanded') == "true") { 
    $(".so_menu_name").html(menu_title); 
} 
else { 
    $(".so_menu_name").html("Menu"); 
} 

});

Try fiddle.

Answer 2

Попробуйте это: DEMO

добавить текст внутри кнопки.

<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar"> 
    Watch the Trailer + 
    </button> 

Answer 3

Мое предложение:

Основные изменения на этих линиях:

<div class="navbar-toggleable-xs collapse in" id="collapsingNavbar"> 

и:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar"> 
    <span class="so_menu_name">Watch the Trailer</span> 
</button> 

$(function() { 
 
    var menu_title = $(".so_menu_name").html(); 
 

 
    $("button.navbar-toggler").on("click", function (e) { 
 
    e.preventDefault(); 
 
    var collapsed = $(this).hasClass("collapsed"); 
 
    if (collapsed) { 
 
     $(".so_menu_name").text(menu_title); 
 
    } 
 
    else { 
 
     $(".so_menu_name").text("Menu"); 
 
    } 
 
    }); 
 
});

.nav.navbar-nav .nav-item { 
 
    float: none; 
 
} 
 
.nav.navbar-nav .nav-item+.nav-item { 
 
    margin-left: 0; 
 
} 
 
.nav.navbar-nav .nav-link { 
 
    padding: .25rem 0; 
 
} 
 
.nav.os_menu { 
 
    border-top: 2px solid rgba(255,255,255,.5); 
 
    border-bottom: 2px solid rgba(255,255,255,.5); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <nav class="navbar navbar-dark bg-inverse"> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar"> 
 
      <span class="so_menu_name">Watch the Trailer</span> 
 
     </button> 
 
     <div class="navbar-toggleable-xs collapse in" id="collapsingNavbar"> 
 
      <ul class="nav navbar-nav os_menu"> 
 
       <li class="nav-item active"> 
 
        <a class="nav-link" href="#">Watch the Trailer<span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="#">Screening & Events</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="#">Synopsis</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="#">The Protagonist</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</div>