klicken Sie auf einen anderen Link ersten Link css entfernen und UL-Anzeige

Question

Wenn ich klicken Sie auf den ersten Link Drop-down-Folie nach unten und Klasse Änderung des Pfeils, aber wenn ich 1. Link öffnen und klicken Sie auf den zweiten Link 1. Link Klasse nicht ändern. hier ist mein Beispielcode

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

Answer 1

Ändern Sie den Code anwenden verwendet, um die Klasse zu wechseln . Entfernen Sie stattdessen die Klasse navupclick Form alle Anker-Tag und fügen Sie die Klasse navupclick für das Klick Ankertag

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

Answer 2

Sie haben eine Veränderung in Ihrem 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>