jQuery Nav Sliding Underline Modify

Question

現在、ナビゲーションタイトルの1つがクリックされたときにスライドする上向きの矢印を持つ簡単なナビゲーションバーがあります。矢印は2つのnavタイトルの間で開始します。ナビのタイトルをクリックすると、少しのテキストもスライドします。

ナビゲーションタイトルを再度クリックすると、下の矢印が開始位置（これはuparrowというCSSクラス）に戻ります。ここで

<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のあるHTML私はこの

JSFIDDLEここ

を行う方法を確認していないです摺動矢印：

$('.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/

変更が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') 
}); 

にtoggleClassです