jQuery Nav滑動下劃線修改

Question

我目前有一個簡單的導航欄，它下面有一個向上的箭頭，當其中一個導航標題被點擊時滑動。箭頭在兩個導航標題之間開始。點擊導航標題時，會有一些文字滑入。

我想要它，當再次點擊導航標題時，下面的箭頭會滑回到它的起始位置（這是一個名爲uparrow的css類）。我不知道如何做到這一點

JSFIDDLE

下面是HTML：

<div id="bottom"> 
    <div class="middle"> 
     <div class="titles"> 
      <h3> 
       <a class="webdesign">Web Design</a> 
       <a class="appdesign">Application Development</a> 
      </h3> 
     </div> 
     <img class="uparrow" src="img/uparrow.png"> 
     <hr> 
    </div> 
    <div class="bottom"> 
     <h4>Web Design </h4> 
     <p>Blah</p> 
    </div> 
    <div class="bottom2"> 
     <h4>Application Development</h4> 
     <p>Blah</p> 
    </div> 
</div> 

這裏是箭頭的CSS：

.uparrow { 
    width:20px; 
} 

.uparrowleft { 
    margin-right:180px; 
    transition: 0.5s ease; 
} 

.uparrowright { 
    margin-left:315px; 
    transition: 0.5s ease; 
} 

這裏是jQuery的對滑動的箭頭：

$('.webdesign').click(function() { 
    $('.bottom2').hide(500); 
    $('.bottom').toggle(500); 
    $('.uparrow').removeClass('uparrowright'); 
    $('.uparrow').addClass('uparrowleft'); 
}); 

$('.appdesign').click(function() { 
    $('.bottom').hide(500); 
    $('.bottom2').toggle(500); 
    $('.uparrow').removeClass('uparrowleft'); 
    $('.uparrow').addClass('uparrowright'); 
}); 

Answer 1

這是你所期望的嗎？

的jsfiddle：https://jsfiddle.net/ek6ktsLg/

的變化是toggleClass在uparrowleft和uparrowright

$('.webdesign').click(function() { 
    $('.bottom2').hide(500); 
    $('.bottom').toggle(500); 
    $('.uparrow').removeClass('uparrowright'); 
    $('.uparrow').toggleClass('uparrowleft'); 
}); 

$('.appdesign').click(function() { 
    $('.bottom').hide(500); 
    $('.bottom2').toggle(500); 
    $('.uparrow').removeClass('uparrowleft'); 
    $('.uparrow').toggleClass('uparrowright') 
});