jQuery: проблема с несколькими текущими завышенными значениями - PullRequest
Новая
       9

jQuery: проблема с несколькими текущими завышенными значениями

2 голосов
/ 27 ноября 2010

Я хочу настроить свой скрипт jQuery для распознавания разных «текущих» состояний, когда я нажимаю на 1 из 3 разных вкладок.В настоящее время код позволяет распознавать только одно «текущее» состояние, поэтому при нажатии на другую вкладку отображается то же преувеличение для кнопки.Я просматривал свой код в течение многих часов, и теперь я обращаюсь к вашим экспертам за помощью.

Возможное решение?: Добавьте какой-нибудь прослушиватель идентификатора, который распознает, какое текущее состояние отображать какзавышение.

Фрагмент 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 {background-color: # D1EFEF;} .current a {color: #FFF;background-image: url ("siteSearch_down.gif");} .current a: hover {color: # 000;}

Я искренне благодарен за ваше время и помощь.

1 Ответ

0 голосов
/ 27 ноября 2010

выстрел в темноте, но, возможно, что-то вроде установки состояний во внешней области видимости поможет вам ..

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

...