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代码错误：

您必须将事件处理程序附加到.navbar-collapse（而不是.navbar-header）。
没有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-expanded属性用于此目的。

jQuery更改Boostrap中的按钮标题

1 个答案:

CODEPEN