1

我有这样的标记。

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

现在我已经jQuery在所选的类中添加了一个类。因此，当用户将鼠标悬停在链接上（此处为购买链接）时，标记变成这样

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="selected">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

现在我只想给选择了一个类的 li 赋予样式。我对 li 的风格是给 li 元素加上边框。那么有人可以告诉我该怎么做吗？任何帮助和建议都将是非常可观的。谢谢....

更新 我想给我的li元素加上边框，a所以请在那个领域帮助我。这可以用简单的 CSS 实现吗？嘿，我仍然在寻找答案......

4

3 回答 3

4

当您根据其后代的类名设置元素的父级样式时：

$('a.selected').closest('li').css('border-top','1px solid #000');

JS 小提琴演示。

或者，稍微好一点，因为它删除了边框（假设这可能是用于鼠标悬停/鼠标悬停）：

$('a.selected').closest('li').hover(function(){
    $(this).css('border-top','1px solid #000');
},function(){
    $(this).css('border-top-width','0');
});

JS 小提琴演示。

用于样式的纯 JavaScript 选项：

var selected = document.querySelector('a.selected');
selected.parentNode.style.borderTop = '1px solid #000';

JS 小提琴演示。

var selected = document.getElementsByClassName('selected')[0];
selected.parentNode.style.borderTop = '1px solid #000';

JS 小提琴演示。

一种改进的替代方法，使用 jQuery 的hover()方法，addClass()而不是直接操作元素的内联样式：

$('a.selected').closest('li').hover(function(){
    $(this).addClass('activeParent');
},function(){
    $(this).removeClass('activeParent');
});

以及以下 CSS：

li {
    /* to prevent jumping down of the li when the border is shown */
    border-top: 1px solid transparent;
}
.activeParent {
    border-top-color: #000;
}

JS 小提琴演示。

于 2013-03-07T11:06:55.403 回答
3

要给li边框，在你调用之后addClass，只需执行以下操作：

$("a.selected").parent().css("border", "1px solid #000");

然后在取消选择时，您可以简单地将其删除：

$("a:not(.selected)").parent().css("border", "none");

小提琴：http: //jsfiddle.net/BMTAE/

于 2013-03-07T11:02:30.753 回答
0

我意识到这可能不是您想要的答案，但无论如何我都会给出它。

您已经在使用 jQuery 将selected类添加到您的a标签中；可能使用类似的东西：

$('a').hover(
    function(){
        $(this).addClass('selected');
    },
    function(){
        $(this).removeClass('selected');
    }
);

如果您将其更改为：

$('a').hover(
    function(){
        $(this).parent().addClass('selected');
    },
    function(){
        $(this).parent().removeClass('selected');
    }
);

您将类添加到父类，li然后可以使用

li {border: 1px solid black;}

或者

.chromestyle li {border: 1px solid black;}

为您的li.

这样做的主要好处是您可以将 CSS 完全保存在样式表中，以便您的代码的未来维护者能够轻松找到它，而不是在您的 javascript 文件中翻找悬停事件处理程序。

添加parent()可能会稍微减慢速度，但任何其他解决方案都需要使用 jQuery 将 CSS 添加到父级，因此总体上应该会提高速度，因为 CSS 内容将由浏览器而不是 javascript 处理。

于 2013-03-07T11:41:04.580 回答