jQuery:多个当前夸大的问题

Question

我想自定义 jQuery 脚本，以便在单击 3 个不同选项卡中的 1 个时识别不同的“当前”状态。目前，代码只允许识别一种“当前”状态，因此当我单击不同的选项卡时，会显示按钮的相同夸大状态。我已经仔细检查了我的代码好几个小时，现在我不同意您的专业知识来寻求帮助。

可能的解决方案？: 添加某种 ID 监听器，识别当前状态显示为夸大状态。

HTML 片段:

<ul class="nav">
<li><a href="#"><img src="textSpacer.png" width="87" height="20"></a>
  <ul>
    <img src="subContentSearch.gif">
    </ul>
</li>
<li><a href="#"><img src="textSpacer.png" width="84" height="20"></a>
    <ul>
    <img src="subContentNewsSignUp.gif">
    </ul>
</li>
<li><a href="#"><img src="textSpacer.png" width="100" height="20"></a>
    <ul>
    <img src="subContentMyVictory.gif">
    </ul>
</li>

jQuery.Clickme.js:

(function($) {

$.fn.clickMe = function(op_user) {

    var menuName = this,                
        op = $.extend( cm.op_default , op_user);

    $(menuName).find("li:has(ul)").addClass("arrow");
    // move content to inicial margin
    $(op.moveIt).css({ marginTop: op.moveItMargin });

    //  anchor inside menu active the code
    $(menuName).find("a").click(function() {

        var ulsVisible = $(menuName).find("ul").is(":visible");
        var testUl = $(this).next("ul").is(":visible");

        // hide and remove op.activeMenu class from visible list inside the menu 
        if (ulsVisible) {
            // know if the anchor that active the function is visible
            if(testUl) {                    
                $(menuName).find("li").removeClass(op.activeMenu);
                moveContent(); 
                $(this).next("ul").animate(op.aniHide, op.speed);           
            } else {
                $(menuName).find("li").removeClass(op.activeMenu);                      
                $(menuName).find("ul").animate(op.aniHide, op.speed);
                $(this).parent("li").addClass(op.activeMenu);
                 moveContent();
                $(this).next("ul").animate(op.aniShow, op.speed );
            }
        } else {
            $(this).parent("li").addClass(op.activeMenu);
            moveContent();
            $(this).next("ul").animate( op.aniShow, op.speed);          
        }
    });

    // Move content 
    function moveContent() {

        var ulHeight = $("."+op.activeMenu +" ul").height() ;
        var moveMargin = parseFloat($(op.moveIt).css("margin-top"));
        var dif = ulHeight + op.moveItMargin - moveMargin;                  

        if (ulHeight == moveMargin) {

        } else if (ulHeight < moveMargin) {
            $(op.moveIt).animate({marginTop: "+=" + dif}, op.speed);

        } else if (ulHeight > moveMargin){
            $(op.moveIt).animate({marginTop: "+=" + dif}, op.speed);            

        }                                           
    }

};

var cm = $.fn.clickMe;
cm.op = {};
cm.op_default = {
    activeMenu: "current",
    moveIt: ".content",
    moveItMargin : 0,
    aniShow: { opacity: "show", height: "show"},
    aniHide: { opacity: "hide", height: "hide"},
    speed: "fast"
};

})(jQuery);

正在使用的 CSS 代码段: .current {背景颜色:#D1EFEF;} .current a {颜色:#FFF;背景图像:url(“siteSearch_down.gif”);} .current a:hover {color: #000;}

我衷心感谢您的时间和帮助。

Answer 1

在黑暗中拍摄，但也许在外部范围内设置状态之类的事情可以帮助你..

var fnc, state = 'state1';
fnc = function () {
  if (state === 'state1') {
    // do something 
    // update the state
    state = 'state2';
  }
  // ... etc
};<p></p>

<p></p>