1

HTML Code:

<ul id="menu-controls">
<li><a target="_self" onclick="return displaySubMenu(0);" id="menu-controls-0" href="" class=""><span>Home</span></a></li>
<li><a target="_self" onclick="return displaySubMenu(1);" id="menu-controls-1" href="" class=""><span>Oleg Test</span></a></li>
<li><a target="_self" onclick="return displaySubMenu(2);" id="menu-controls-2" href="" class="act"><span>Products</span></a></li>
<li><a class="active" onclick="return displaySubMenu(3);"target="_self" ><span>About Us</span></a> </li>
<li><a class="" onclick="return displaySubMenu(4);"><span>Contact Us</span></a></li>
<li><a class="" onclick="return displaySubMenu(5);" class=""><span>Login / Register</span></a></li>
</ul>

How we identify that "previous active class is left or right" when displaySubMenu call on click link?

Need to check "active" class is left or right in display menu function?

4

3 回答 3

1

您可以使用.index()来确定您的位置a.active：

$("#menu-controls li a").click(function () {

    var myActive = $("a.active").parent().index();
    var myClicked = $(this).parent().index()

    if (myActive < myClicked) {
        alert("Previous active was left")
    } else if (myActive > myClicked) {
        alert("Previous active was right")
    } else if (myActive == myClicked) {
        alert("Previous active is this clicked one")
    }

    $("a.active").removeClass("active");
    $(this).addClass("active")

})

检查小提琴

于 2013-10-08T09:16:35.970 回答
0

这里是一个FIDDLE，它记录活动元素是否在被点击的元素之前或之后。

HTML 更改：函数“this”中的新参数

<ul id="menu-controls">
<li><a target="_self" onclick="return displaySubMenu(0, this);" id="menu-controls-0" href="" class=""><span>Home</span></a></li>
<li><a target="_self" onclick="return displaySubMenu(1, this);" id="menu-controls-1" href="" class=""><span>Oleg Test</span></a></li>
<li><a target="_self" onclick="return displaySubMenu(2, this);" id="menu-controls-2" href="" class="act"><span>Products</span></a></li>
<li><a class="" onclick="return displaySubMenu(3, this);"target="_self" ><span>About Us</span></a> </li>
<li><a class="active" onclick="return displaySubMenu(4, this);"><span>Contact Us</span></a></li>
<li><a class="" onclick="return displaySubMenu(5, this);" class=""><span>Login / Register</span></a></li>
</ul>

查询：

function displaySubMenu(number, element){
    var lastActive = $('.active').parents('li');
    var currentClick = $(element).parents('li');
    console.log(lastActive);console.log(currentClick);
    if($(currentClick).next(lastActive).length){
        var lastPosition = 'right';
    } else {
        var lastPosition = 'left';
    }
    console.log(lastPosition);
}
于 2013-10-08T09:18:12.803 回答
0

不知道我是否正确理解了你的问题，但如果我是对的，试试这个。给每个锚标签一个通用类（例如“items”）。现在在 displaySubMenu 函数中使用这个->

var flag = 0;
var th = $(this);
$(th).parent().find('.items').each(function(){
   $(this).removeClass('left');
   $(this).removeClass('right');
   if(flag == 1){
      $(this).addClass('right');
   } else
   if($(this) == $(th) {
      flag = 1;
   } else {
      $(this).addClass('left');
});
if($(th).parent().find('.active').hasClass('left')){
   console.log("Left"); // Write your code here for the case where previously active is left
   $(this).removeClass('active');
} else if($(th).parent().find('.active').hasClass('right')){
   console.log("Right"); // Write your code here for the case where previously active is right
   $(this).removeClass('active');
}

$(th).addClass('active');

在这段代码中，我只是一个一个地遍历锚标签，当前点击元素之前的所有标签都被赋予左边的类，而在它之后的那些标签被赋予右边的类（因为那些标签写在当前之前单击的标签应在其左侧，反之亦然）。现在检查先前活动的类是否具有左侧或右侧类，然后我们将活动类从前一个标签中删除后添加到当前单击的标签中。

于 2013-10-08T09:07:36.207 回答