打開時用另一個圖形代替切換

我想在打開移動導航時用'X'替換我的切換按鈕。我的導航/網站利用引導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; 
}

來源

2015-06-24 user3550879

user3550879你有什麼試過，沒有奏效？請具體說明，您給社區的更多細節，獲得良好答案的機會更大。 – leopic

只需選擇它裏面的span和切換文本。試試看：

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

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

編輯：既然你已經使用jQuery，所有你需要做的就是把你的<head>或<body>這在任何地方：

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

這將確保按鈕在查找時加載。還要確保在你的按鈕上使用一個ID，並在JS中反映出來。

來源

2015-06-24 22:15:10 blex

我可以把這個JavaScript放在任何地方（在我的頭標籤）？ – user3550879

@ user3550879我編輯了關於您的評論的答案。 – blex

所以我用這個id替換。這個我給我的按鈕呢？ – user3550879

打開時用另一個圖形代替切換

回答

相關問題