jquery - 单击另一个链接首先链接 css 删除和 ul 显示

Question

当我点击第一个链接下拉下拉和箭头的类更改时，但是当我打开第一个链接并单击第二个链接时，第一个链接类没有改变。 这是我的示例代码

$(".navclick").click(function(event) { 
 $('.navslidedown ul').each(function(){
	$(this).slideUp();
	
  });
  var $slide = $(this).next('.navslidedown ul');
  if ($slide.is(':visible')) {
      $slide.slideUp();
  }else{
      $slide.slideDown();       
  }
  
 
});

$('.navclick').click(function() {
      $(this).toggleClass('navupclick').sibling().removeClass('navupclick');
});

.navslidedown{  float: left;    width: 95%;}
.navslidedown ul{display:none}
.navslidedown li{ display:block; background:#e8ce49;    border-bottom: 1px solid #fbdc3b; margin-bottom:20px}

.navslidedown li a{padding-left:44px}
.navclick{background: url(http://54.85.78.249/design/dna/images/dpdwnarow.png) no-repeat center 0px;         display: block;   margin-bottom:15px; cursor:pointer}

.navupclick{background: url(http://54.85.78.249/design/dna/images/dpuparow.png) no-repeat center 0px;       display: block;   margin-bottom:15px   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navslidedown">
<a  title="India"  class="navclick">India</a>
    
     <ul>
     <li><a href="#">Delhi</a></li>
     <li><a href="#">Mumbai</a></li>
     </ul>
     </div>
     
     <div class="navslidedown">
     <a  title="India"  class="navclick">world</a>
    
     <ul>
     <li><a href="#">USA</a></li>
     <li><a href="#">Australia</a></li>
     </ul>
     </div>

Answer 1

更改用于切换类的代码。而不是从所有 anchor 标记中删除类 navupclick 并将类 navupclick 添加到单击的 anchor 标记

$(".navclick").click(function(event) { 

  $('.navclick').removeClass('navupclick');
  

 $('.navslidedown ul').each(function(){
	  $(this).slideUp(); 
  });
  var $slide = $(this).next('.navslidedown ul');
  if ($slide.is(':visible')) {
      $slide.slideUp();
  }else{
      $slide.slideDown();   
     $(this).addClass('navupclick');
  }
  
 
});
 

.navslidedown{  float: left;    width: 95%;}
.navslidedown ul{display:none}
.navslidedown li{ display:block; background:#e8ce49;    border-bottom: 1px solid #fbdc3b; margin-bottom:20px}

.navslidedown li a{padding-left:44px}
.navclick{background: url(http://54.85.78.249/design/dna/images/dpdwnarow.png) no-repeat center 0px;         display: block;   margin-bottom:15px; cursor:pointer}

.navupclick{background: url(http://54.85.78.249/design/dna/images/dpuparow.png) no-repeat center 0px;       display: block;   margin-bottom:15px   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navslidedown">
<a  title="India"  class="navclick">India</a>
    
     <ul>
     <li><a href="#">Delhi</a></li>
     <li><a href="#">Mumbai</a></li>
     </ul>
     </div>
     
     <div class="navslidedown">
     <a  title="India"  class="navclick">world</a>
    
     <ul>
     <li><a href="#">USA</a></li>
     <li><a href="#">Australia</a></li>
     </ul>
     </div>