Question

当我使用此代码时，当我点击nav-btn一次它变得更改但是当我点击第二次时内容将隐藏并且nav-btn（src）保持不变我想在第二次点击时获得默认的src（下拉图标）（但我的按钮仍然是关闭图标）

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

.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://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>
              	  <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>

Answer 1

问题是因为您只设置src img一次。相反，您需要检查当前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>

将图像src更改为切换按钮

1 个答案: