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

-1

当我点击第一个链接下拉滑动下来和班级变化的箭头，但是当我打开第一个链接并点击第二个链接第一个链接类不会改变。这里是我的示例代码点击另一个链接第一个链接css删除和ul显示

$(".navclick").click(function(event) { 
 
$('.navslidedown ul').each(function(){ 
 
\t $(this).slideUp(); 
 
\t 
 
    }); 
 
    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>

来源

2017-06-07 afzal

https://jsfiddle.net/Abzalabbas/3vxxomcn/1/ – afzal

在所以在这里添加相关的代码，如果你可以创建小提琴然后确定可以创建一个代码片断，点击'''''参见：[如何创建一个最小，完整和可验证的示例。]（http://stackoverflow.com/help/mcve） – Satpal

@afzal Check如果你正在寻找这个https://jsfiddle.net/83onh68k/ – XYZ

更改使用代码来切换类。而不是去除01级形式的所有锚标记和类navupclick添加到点击的锚标记

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

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

 
$('.navslidedown ul').each(function(){ 
 
\t $(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>

来源

2017-06-07 06:30:22 XYZ

比XYZ的工作。 – afzal

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

来源

2017-06-07 06:30:13 Gerard

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

回答

相关问题