jquery - 使用 jQuery 在单击时应用不同的 CSS 类

Question

我目前正在建立一个 WordPress 网站，使用 this template来自 ThemeForest，这里是 live preview我目前正在做的事情 (现在应该可以了 - 如果它不起作用请告诉我)。

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

如下所示，我在导航方面遇到的主要问题出在 CSS 中。 Portfolio 链接(图片中的 Portfolio 部分)仍然应用了选定的类，以及内部无序列表项。我想让它看起来像图片中的博客部分，其中博客链接不再应用所选的类元素。

我问过模板的创建者为什么会这样；他的回答是下面需要另一个包含标题属性“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, 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 会影响网站上的链接悬停效果，我不确定这是否是代码无效的原因WordPress模板的scripts.js文件

/* 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();
        });

但是，它仍在做的(如下所示)是它仍然选择了与所选文本一样的文本。

非常感谢任何帮助!

Answer 1

这是否会给您带来预期的行为？

  $('a').each(function(e){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
        $(this).hoverFadeColor();
        e.preventDefault();
   })

添加 e.preventDefault() 应该可以解决问题。

2012 年 12 月 10 日更新:

尝试将您的点击功能更新为以下内容:

$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').on("click",function(){
    var linkClicked = $(this);
    $("#menu-main-menu li").each(function(){
        $(this).removeClass("selected").css({'color' : '#888'}).addClass('menu-item');
        $(this).first("div").show();
    });
    linkClicked.css({'color' : '#222'})
});