Changing menu title only happens after first time

Question

I have a bootstrap menu. If it is collapsed I want it to have the name of the page, if it is open I want it to name menu.

For now I named it "Watch the Trailer" (so assume where on that page). When clicking the button, changing the title works but it only works after the first time. Why is that?

And is my approach a good approach? Here is a 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>

score 1 · Accepted Answer · answered Apr 23 '16 at 13:15

There may be some issues in plugin in my analysis. For the first click it doesn't add or remove class called collapse.

If you use its attribute aria-expanded you may solve this issue.

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.

score 0 · Answer 2 · answered Apr 23 '16 at 12:42

0

Try this : DEMO

I add text inside button.

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

answered Apr 23 '16 at 12:42

vrajesh

2,935
3
25
40

score 0 · Answer 3 · answered Apr 23 '16 at 13:07

My proposal is:

Main changes on these lines:

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

and:

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

Changing menu title only happens after first time

3 Answers3