Question

好的，基本上我有一个Joomla网站和一个水平jQuery导航。我需要一个箭头（“#selector”）来指向活动的顶部导航。导航处于无序列表中。使用jquery我通过指定一个具有相应margin-left值的类来移动悬停箭头（我想要）但是一旦我选择了该链接并且它成为活动父级我需要箭头留在那里直到它再次移动因为悬停行动。

例如：

<style>
#nav li {
list-style: none;
display: inline;
}
#nav_arrow .item-2-selector {
margin-left: 45px!important;
}
</style>

<ul id="nav">
    <li class="item-1 active">Page 1</li>
        <ul>
            <li>SubPage1</li>
            <li>SubPage2</li>
            <li>SubPage3</li>
        </ul>
    <li class="item-2">Page 2</li>
    <li class="item-3">Page 3</li>
    <li class="item-4">Page 4</li>
</ul>

 <div id="nav_arrow">
  <div id="selector" class="position"><img src="nav_current.png"/></div>
</div>

我的逻辑我希望能够提出一个jQuery解决方案：

当.item-1.active EXIST $（“＃selector”）。css（'margin-left'，'20px'）;
当.item-2.active EXIST $（“＃selector”）。css（'margin-left'，'45px'）;
当.item-3.active EXIST $（“＃selector”）。css（'margin-left'，'70px'）;

...等...

基本上这就是我为悬停效果所做的事情：

<script>

$(document).ready(function(){
$(".item-466").mouseover(function(){
 $("#selector").addClass("item-2-selector");
 });
});
</script>

这是我的测试网站的网址，以便您可以更准确地了解我正在尝试做的事情：http://trustmarkstaging.com

提前感谢您的帮助！：）

Answer 1

蛮力方式是：

var marginLeft;
if ($(".item-3.active").length > 0) {
    marginLeft = "70px";
} else if ($(".item-2.active").length > 0) {
    marginLeft = "45px";
} else if ($(".item-1.active").length > 0) {
    marginLeft = "20px";
} else {
    marginLeft = 0;
}

$("#selector").css("margin-left", marginLeft);

我不清楚是否有多个项目可以激活，这就是为什么我以相反的顺序测试它们（寻找最活跃的编号项目）。

对任意数量的项目都适用的更优雅和可扩展的方法可能是这样的：

var marginLeft = 0;
var active = $("#nav li.active:last");
if (active.length > 0) {
    marginLeft = ((active.index() * 25) + 20) + "px";
}
$("#selector").css("margin-left", marginLeft);

Answer 2

您可以通过检查jQuery对象的length属性来检查jQuery是否存在元素。例如：

if($('.item-1.active').length > 0) $("#selector").css('margin-left', '20px');
if($('.item-2.active').length > 0) $("#selector").css('margin-left', '45px');
if($('.item-3.active').length > 0) $("#selector").css('margin-left', '70px');

Answer 3

var itemsClasses = getItemClasses('#nav li');
var allClasses = itemsClasses.join('-selector ') + '-selector';

console.log(allClasses);
$("#nav li.active").mouseover(function(){
    var itemClass = getItemClasses(this)[0];
    //console.log(itemClass);
    if (itemClass != undefined) {
        $("#selector").removeClass(allClasses).addClass(itemClass+'-selector');
        console.log($("#selector").attr('class'));
    }
});

function getItemClasses(thing) {
    var itemsClasses = [];
    $(thing).each( function () {
        var classAttr = $(this).attr('class');
        if (classAttr != undefined) {
            var itemClasses = classAttr.split(' ');
            for (var i in itemClasses) {
                if ( itemClasses[i].indexOf('item') == 0 ) {
                    itemsClasses.push(itemClasses[i]);
                }
            }
        }
    });
    return itemsClasses;
}

编辑大量更新，here is a working fiddle

如你所见，这很重。如果您可以为每个li添加id="item-1"之类的内容，则代码将更轻一些;）

它适用于任意数量的li，而不仅仅是3，它假设css文件为.item-X-selector获得了相应的＆＃34; margin-left＆＃34; s。最后，它独立于活动状态，假设悬停的li是活动状态。

如果您需要解释，请询问;）

使用jQuery我想只在一个div中添加一个类，而另一个未连接的div与特定的类存在

3 个答案: