点击另一个链接第一个链接css删除和ul显示

时间:2017-06-07 06:11:11

标签: jquery html css

当我点击第一个链接下拉列表和箭头的类更改时,但是当我打开第一个链接并点击第二个链接时,第一个链接类不会改变。 这是我的示例代码

$(".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>

2 个答案:

答案 0 :(得分:1)

您必须在jQuery $('.navclick').click(function() {

中应用更改

$(".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() {
  $("a.navupclick").not(this).removeClass("navupclick");
  $(this).toggleClass('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>

答案 1 :(得分:1)

更改用于切换类的代码。相反,删除类 Observable.fromIterable(tisImageEntities) .map(tisImageEntity -> new TisImageUploadEntity(tisImageEntity.projectId, tisImageEntity.imagePath.substring(tisImageEntity.imagePath.lastIndexOf("/") + 1), "fit.jpg", tisImageEntity.detail, tisImageEntity.imageType, getBase64EncodedString(tisImageEntity.imagePath))) .filter(tisImageUploadEntity -> null != tisImageUploadEntity.Content) .flatMap(tisImageUploadEntity -> hitachiRetrofitApi.uploadTisImages(tisImageUploadEntity) .subscribeOn(Schedulers.io()), (tisImageUploadEntity, responseBody) -> Pair::new ) .doOnNext(pair -> UpdateQuery.updateTisImageStatus(mContext, pair.first.projectId)) .map(pair -> pair.second) .subscribeOn(Schedulers.io()); 形成所有锚标记,并将类navupclick添加到单击的锚标记

&#13;
&#13;
navupclick
&#13;
$(".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');
  }
  
 
});
 
&#13;
.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   }
&#13;
&#13;
&#13;