改进切换菜单Jquery

Question

我需要对我的JS代码提出意见。我从Jquery开始，尝试使用UI Jquery为我的网站做一个切换菜单。可以重新制作我想提高我的技能的代码。对不起我的英语不好。 .................................................. ...............

var trigger = $('.pht-lista li');
  var digital = $('#artDigital');
  var tradicional = $('#tradicional');

  
  $('.menuTipos').each(function(){

    trigger.click(function(event) {
      trigger.not(this).removeClass('active');
      $(this).addClass('active');
    });
    digital.click(function(e){
      if(digital.hasClass('active')){
        $('.subArtDigital').toggle('slow/400/fast');
        $('.subTradicional').hide();
      }else{
        $('.subArtDigital').hide();
      }
    });
    tradicional.click(function(e){
      if(tradicional.hasClass('active')){
        $('.subTradicional').toggle('slow/400/fast');
        $('.subArtDigital').hide();
      }else{
        $('.subTradicional').hide();
      }
    });
  });  

.pht-lista li {
  list-style: none;
  padding: 15px;
  background-color: #625F5F;
  transition: .4s ease; }
  .pht-lista li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff; }
.pht-lista li:hover {
  background-color: #3D3A3A; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>
<div class="uk-modal" id="modalTypeFile">
		<div class="uk-modal-dialog uk-modal-dialog-blank">
		 <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
			<div class="uk-modal-header">
				<div class="uk-width-1-1 titleBar">
					<p>Tipo</p>
				</div>
			</div>
        		<div class="uk-grid menuTipos">
        			<div class="listaPrincipal uk-width-large-2-10 uk-width-medium-3-10 uk-width-small-hidden">
        				<ul class="pht-lista">
        					<li class="pht-linkLista" id="artDigital"><a>Art Digital</a></li>
        					<li class="pht-linkLista" id="tradicional"><a>Tradicional</a></li>
        				</ul>
        			</div>
        			<div style="display: none" class="subArtDigital uk-width-large-2-10 uk-width-medium-3-10 uk-width-small-hidden">
        				Digital
        			</div>
        			<div style="display: none" class="subTradicional uk-width-large-2-10 uk-width-medium-3-10 uk-width-small-hidden">
        				Tradicional
        			</div>
        		</div>
		</div>
	</div>