使用jQuery在点击上应用不同的CSS类

我正在设置WordPress网站，使用ThemeForest中的 this template，这里是我目前正在工作的 live preview(现在应该工作 – 请让我知道，如果它不工作)。

我配置了CSS，所以当悬停的左边框将是浅灰色。然后，当点击链接时，左边框将是我选择的蓝色。

如下图所示，导航的主要问题是CSS。投资组合链接(图片中的投资组合部分)仍然具有所选择的类，以及内部无序列表项。我想让它看起来像图片中的博客部分，博客链接不再应用所选的类项目。

我问模板的创建者为什么发生这种情况？他的回应是需要在下面的另一个链接包含标题属性’allportfolio’，所以它将正常工作。我尝试将此属性添加到主要投资组合链接，但是完全关闭该列表。

当菜单创建时，浏览器以HTML形式创建投资组合选择：

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57,57,57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">logos</a></p></li>
      </ul>
   </div>
   </li>

我试图像this answer这样的东西，但没有工作，因为它似乎没有在列表项目中包含任何东西。以下jQuery代码是我的尝试：

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function(){
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    });

我感到困惑，因为我无法弄清楚如何让HTML看起来像下面(取出CSS类’selected’并添加CSS类’menu-item’)：

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57,57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">logos</a></p></li>
      </ul>
   </div>
   </li>

更新：@limelights的答案似乎有效，但是我发现一些影响网站链接悬停效果的jQuery，并不确定这是否是代码不能正常工作的原因是scripts.js文件wordpress模板

/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

此外，我非常接近我想要完成的，使用这段代码来最终保持内部链接的打开：

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function(){
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        });

但是，它仍然在做什么(如下所示)，它仍然具有如所选文本所选择的文本。

任何帮助是极大的赞赏！

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   border-left:6px solid #F0F0F0;
}

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   /*border-left:6px solid #F0F0F0;*/
}

<script type="text/javascript">
$(document).ready(function() {
$("#menu-main-menu li:first").addClass("selected");
$("#menu-main-menu li p a").css("border-left","none");
$("#menu-main-menu li p a").hover(function(){$(this).css("border-left","6px solid #F0F0F0");});
$("#menu-main-menu li").click(function() {
  $(this).addClass("selected");
});
});
</script>