Question

我想在打开移动导航时用'X'替换我的切换按钮。我的导航/网站使用Bootstrap 3框架

HTML

<div class="navbar-header">

    <a class="navbar-brand" href="<?php echo home_url(); ?>"></a>        

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
    </button> 

</div>

CSS

.navbar-custom .icon-bar {
  background-color:#333;
  transition: background-color 0.75s ease;
}

.navbar-custom .navbar-toggle {
  padding: 0; margin: 0;
  border-radius:0;
  border:none;
}

Answer 1

只需选择其中的span并切换文字即可。试试吧：

＆＃13;

$('#toggleNav').click(function(){
  var txt = ( $(this).text().trim(' ') == 'X' ) ? 'Toggle navigation' : 'X';
  $( '.sr-only', $(this) ).text(txt);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<!-- Removed irrelevant HTML -->

<button id="toggleNav"> 
    <span class="sr-only">Toggle navigation</span> 
    <span></span>
</button>

＆＃13;

修改：由于您已经在使用jQuery，所以您只需将其放在<head>或<body>中的任何位置：

<script>
    $(document).ready(function(){
        // Code goes here
    });
</script>

这将确保在查找按钮时加载该按钮。还要确保在按钮上使用ID，并在JS中反映出来。

打开时用另一个图形替换切换

1 个答案: