【发布时间】：2012-02-29 05:47:24
【问题描述】：
我目前正在建立一个 WordPress 网站，使用来自 ThemeForest 的 this template，这是我目前正在开发的 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();
});
但是，它仍然在做的是（如下所示），它仍然选择文本，就像所选文本一样。
非常感谢任何帮助！
【问题讨论】：
-
我没有完全得到问题，您是否希望在选择子元素时取消选择父元素？
-
@OmidAmraei 如果我不是很清楚，我很抱歉。我确实希望在选择子元素时取消选择父元素。
-
我在实时预览中看到的正是您想要的。我认为您使用错误的代码编辑了模板。
-
@OmidAmraei 我明白你的意思，但我正在尝试的内容与实时预览中显示的内容之间的唯一区别是我不想要 All 链接。这确实使我想要的工作，但我不希望 All 链接显示在主 Portfolio 链接中。
-
嗨，阿布里尔。我仍然对您的问题感到有些困惑。这是我看到的预期行为......当我将鼠标悬停在其部分中的元素上时，我只看到带有灰色左侧选项卡的父显示。你不希望父母有这种悬停状态吗？例如，假设我在投资组合下，然后单击“网站设计”，问题是什么，父容器仍然显示悬停状态？我在您提供的预览中没有看到任何奇怪的行为。您引用的“全部”链接在哪里？