jQuery在Boostrap中更改按钮标题

Question

我尝试使用相同类型的jQuery来更改面板代码，但是它没有工作。我不知道我在这里错过了什么。该按钮是打开下拉菜单和更改标题在按钮让屏幕阅读器用户知道菜单是打开或关闭。以下是代码：

    <div class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" id="menu_button" role="menu" class="navbar-toggle pull-left" title="Menu button closed" data-toggle="collapse" data-target="#myNavbar" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button> 
          <a class="navbar-brand" href="#">News and Information</a>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page A</a></li>
            <li><a href="#">Page B</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page C <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Page C - 1</a></li>
                  <li><a href="#">Page C - 2</a></li>
                  <li><a href="#">Page C - 3</a></li>        
                </ul>        
            </li>
          </ul>
      </div>
    </div>
  </div>

jQuery

    <script>
    $('.navbar-header').on('shown.bs.navbar-header', function(){
        $(this).parent().find(".navbar-toggle").attr('title', 'dropdown menu open');
        }).on('hidden.bs.navbar', function(){
        $(this).parent().find(".navbar-toggle").attr('title', 'dropdown menu closed');
    });
</script>

Answer 1

您的JS代码是错误的：

1. 您必须将事件处理程序附加到.navbar-collapse (而不是.navbar-header)。
2. 没有shown.bs.navbar-header。使用shown.bs.collapse代替。

用这个：

$('.navbar-collapse').on('shown.bs.collapse', function() {
  $(this).parent().find(".navbar-toggle").attr('title', 'dropdown menu open');
}).on('hidden.bs.collapse', function() {
  $(this).parent().find(".navbar-toggle").attr('title', 'dropdown menu closed');
});

CODEPEN

顺便说一句，Bootstrap使用aria-expanded来表示可折叠元素的状态，所以您不必使用它。

例如，当作者使用可折叠内容来隐藏导航菜单或内容列表时，触发链接或按钮应指示屏幕读取器用户下面的可折叠内容是处于展开状态还是处于折叠状态。aria展开属性用于此目的。