更改圖像src作爲切換按鈕作品

Question

當我使用此代碼，當我點擊nav-btn一次它變得更改，但當我點擊第二次內容將隱藏和nav-btn（src）不變 我想得到默認的SRC（下拉圖標），當我點擊第二次（但我的按鈕仍接近圖標）

$(document).ready(function(){ 
 
    $("img.nav-btn").click(function(){ 
 
     $("nav>ul").toggle('slow'); 
 
\t \t $(".nav-btn").attr('src', 'http://www.salmanulfaris.com/GEM/images/button_1.png')(500); 
 
    }); 
 
\t });

.nav-ul { 
 
\t background-color:#252525; 
 
\t width:100%; 
 
\t display:none; 
 
\t padding: 40px 0px 10px 0px; 
 
\t margin:0px 0px 0px 0px; 
 
\t position:absolute; 
 
\t height:375px; 
 
\t right:0; 
 
} 
 
.nav-ul > li { 
 
\t display:block; 
 
\t width:50%; 
 
\t border-bottom:solid 1.5px #57d846; 
 
\t margin:0 auto; 
 
\t margin-bottom:25px; 
 
\t font-weight:700; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<nav> 
 
       \t <img src="http://www.salmanulfaris.com/GEM/images/button.png" class="nav-btn"> 
 
        <ul class="nav-ul" id=""> 
 
        \t <li><a href="#" >HOME</a></li> 
 
         <li ><a href="#" >TUTORIALS</a></li> 
 
         <li><a href="#">ARTICLES</a></li> 
 
         <li><a href="#">ABOUT US</a></li> 
 
        </ul>     
 
       </nav>

Answer 1

的問題是，因爲你只設置img的src一次。相反，你需要檢查當前src是什麼，然後切換它的每一次點擊，這樣的事情：

$("img.nav-btn").click(function() { 
 
    $("nav > ul").toggle('slow'); 
 
    $(".nav-btn").attr('src', function(i, src) { 
 
     return src == 'http://www.salmanulfaris.com/GEM/images/button.png' ? 'http://www.salmanulfaris.com/GEM/images/button_1.png' : 'http://www.salmanulfaris.com/GEM/images/button.png'; 
 
    }); 
 
});

.nav-ul { 
 
    background-color: #252525; 
 
    width: 100%; 
 
    display: none; 
 
    padding: 40px 0px 10px 0px; 
 
    margin: 0px 0px 0px 0px; 
 
    position: absolute; 
 
    height: 375px; 
 
    right: 0; 
 
} 
 

 
.nav-ul>li { 
 
    display: block; 
 
    width: 50%; 
 
    border-bottom: solid 1.5px #57d846; 
 
    margin: 0 auto; 
 
    margin-bottom: 25px; 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<nav> 
 
    <img src="http://www.salmanulfaris.com/GEM/images/button.png" class="nav-btn"> 
 
    <ul class="nav-ul" id=""> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">TUTORIALS</a></li> 
 
    <li><a href="#">ARTICLES</a></li> 
 
    <li><a href="#">ABOUT US</a></li> 
 
    </ul> 
 
</nav>