Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Usunięcie akcji close ze skryptu js

JS  Założony przez  SeikS.

Siemka mam nietypowy problem. Tworzę menu popup jednak jest w nim 1 problem. Kiedy stworzę div np usermenu i tworzę w niej np linki w formie listy. Teraz pozostaje mój problem. Chcę aby podczas klikania w div usermenu, który się pojawia nie chował się on tak jak to robi teraz... Pewnie chodzi o drobiazg w kodzie ale js to dla mnie jeszcze czarna magia. Zapodaje kod jeżeli ktoś się podejmie to dzięki wielkie ;)

var PopupMenu = Class.create();

PopupMenu.prototype = {

initialize: function(id, options)
{
document.currentMenu = "";

if(!$(id))
{
return false;
}
this.id = id;
var element = $(id);

var popupMenu = element.id+"_popup";
if(!$(popupMenu))
{
return false;
}

this.menu = $(popupMenu);
this.menu.style.display = "none";
element.onclick = this.openMenu.bindAsEventListener(this);
},

openMenu: function(e)
{
Event.stop(e);
if(document.currentMenu && document.currentMenu == this.id)
{
this.closeMenu();
return false;
}
else if(document.currentMenu != "")
{
this.closeMenu();
}

offsetTop = offsetLeft = 0;
var element = $(this.id);
do
{
offsetTop += element.offsetTop || 0;
offsetLeft += element.offsetLeft || 0;
element = element.offsetParent;
if(element)
{
if(Element.getStyle(element, 'position') == 'relative' || Element.getStyle(element, 'position') == 'absolute') break;
}
} while(element);
offsetTopReal = offsetTop;
offsetLeftReal = offsetLeft;
if(element) // will be true if we broke off the last loop
{
// calculate the true top/left position relative to page borders (this is used for checking whether the popup menu will be displayed within the page)
do
{
offsetTopReal += element.offsetTop || 0;
offsetLeftReal += element.offsetLeft || 0;
} while(element = element.offsetParent);
}
element = $(this.id);
element.blur();
this.menu.style.position = "absolute";
this.menu.style.zIndex = 100;
this.menu.style.top = (offsetTop+element.offsetHeight-1)+"px";
// Bad browser detection - yes, only choice - yes.
if(MyBB.browser == "opera" || MyBB.browser == "safari")
{
this.menu.style.top = (parseInt(this.menu.style.top)-2)+"px";
}
this.menu.style.left = offsetLeft+"px";
this.menu.style.visibility = 'hidden';
this.menu.style.display = 'block';
if(this.menu.style.width)
{
menuWidth = parseInt(this.menu.style.width);
}
else
{
menuWidth = this.menu.offsetWidth;
}
pageSize = DomLib.getPageSize();
if(offsetLeftReal+menuWidth >= pageSize[0])
{
this.menu.style.left = (offsetLeft-menuWidth+element.offsetWidth)+"px";
}
this.menu.style.display = 'block';
this.menu.style.visibility = 'visible';

fadeInElement(this.menu.id, 0, 0.3, 1);
document.currentMenu = element.id;
//Event.observe(document, 'click', this.closeMenu.bindAsEventListener(this));
document.onclick = this.closeMenu.bindAsEventListener(this);
if(this.openFunc)
this.openFunc();
},

closeMenu: function()
{
if(document.currentMenu && !document.lockMenu)
{
menu = document.currentMenu;
menu = $(menu+"_popup");
fadeOutElement(document.currentMenu+"_popup", 1, 0.4, 0, function(){
menu.style.display = "none";
});
document.currentMenu = "";
document.onclick = function() { };

if(this.closeFunc)
this.closeFunc();
}
}
};

function fadeInElement(elemId, alpha, rate, targetAlpha, completeFunc)
{
if((alpha += rate) > targetAlpha) alpha = targetAlpha;
setOpacity(document.getElementById(elemId), alpha);
if(alpha < targetAlpha)
setTimeout(function(){fadeInElement(elemId, alpha, rate, targetAlpha, completeFunc);}, 125);
else if(completeFunc)
completeFunc();
}

function fadeOutElement(elemId, alpha, rate, targetAlpha, completeFunc)
{
if((alpha -= rate) < targetAlpha) alpha = targetAlpha;
setOpacity(document.getElementById(elemId), alpha);
if(alpha > targetAlpha)
setTimeout(function(){fadeOutElement(elemId, alpha, rate, targetAlpha, completeFunc);}, 125);
else if(completeFunc)
completeFunc();
}

// this function copied and modified from effects.js
function setOpacity(element, value)
{
if (value == 1)
{
element.style.opacity = (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.999999 : null;
if(/MSIE/.test(navigator.userAgent))
element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
}
else
{
if(value < 0.00001) value = 0;
element.style.opacity = value;
if(/MSIE/.test(navigator.userAgent))
element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'') +"alpha(opacity="+value*100+")";
}
}


kod do ujawniania menu
<a id="usermenu" href="#"><></a>
<div id="usermenu_popup" class="popup_menu" style="display: none;">
<a href="#">Lubie placki</a>
<br>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
new PopupMenu("usermenu");
}
// -->
</script>
twój js wygląda w miarę dobrze, lecz dla pewności sprawdź ten co ja u siebie mam i na pewno u mnie działa
var PopupMenu = Class.create();

PopupMenu.prototype = {

    initialize: function(id, options)
    {
        document.currentMenu = "";

        if(!$(id))
        {
            return false;
        }
        this.id = id;
        var element = $(id);
        
        var popupMenu = element.id+"_popup";
        if(!$(popupMenu))
        {
            return false;
        }
        
        this.menu = $(popupMenu);
        this.menu.style.display = "none";
        element.onclick = this.openMenu.bindAsEventListener(this);
    },
    
    openMenu: function(e)
    {
        Event.stop(e);
        if(document.currentMenu && document.currentMenu == this.id)
        {
            this.closeMenu();
            return false;
        }
        else if(document.currentMenu != "")
        {
            this.closeMenu();
        }
        
        offsetTop = offsetLeft = 0;
        var element = $(this.id);
        do
        {
            offsetTop += element.offsetTop || 0;
            offsetLeft += element.offsetLeft || 0;
            element = element.offsetParent;
            if(element)
            {
                if(Element.getStyle(element, 'position') == 'relative' || Element.getStyle(element, 'position') == 'absolute') break;
            }
        } while(element);
        offsetTopReal = offsetTop;
        offsetLeftReal = offsetLeft;
        if(element) // will be true if we broke off the last loop
        {
            // calculate the true top/left position relative to page borders (this is used for checking whether the popup menu will be displayed within the page)
            do
            {
                offsetTopReal += element.offsetTop || 0;
                offsetLeftReal += element.offsetLeft || 0;
            } while(element = element.offsetParent);
        }
        element = $(this.id);
        element.blur();
        this.menu.style.position = "absolute";
        this.menu.style.zIndex = 100;
        this.menu.style.top = (offsetTop+element.offsetHeight-1)+"px";
        // Bad browser detection - yes, only choice - yes.
        if(MyBB.browser == "opera" || MyBB.browser == "safari")
        {
            this.menu.style.top = (parseInt(this.menu.style.top)-2)+"px";
        }
        this.menu.style.left = offsetLeft+"px";
        this.menu.style.visibility = 'hidden';
        this.menu.style.display = 'block';
        if(this.menu.style.width)
        {
            menuWidth = parseInt(this.menu.style.width);
        }
        else
        {
            menuWidth = this.menu.offsetWidth;
        }
        pageSize = DomLib.getPageSize();
        if(offsetLeftReal+menuWidth >= pageSize[0])
        {
            this.menu.style.left = (offsetLeft-menuWidth+element.offsetWidth)+"px";
        }
        this.menu.style.display = 'block';    
        this.menu.style.visibility = 'visible';

        document.currentMenu = element.id;
        Event.observe(document, 'click', this.closeMenu.bindAsEventListener(this));
    },
    
    closeMenu: function()
    {
        if(!document.currentMenu)
        {
            return;
        }
        var menu = document.currentMenu;
        menu = $(menu+"_popup");
        menu.style.display = "none";
        document.currentMenu = "";
        document.onclick = function() { };
    }
};

jeśli nie pomoże to trzeba nad html się zastanowić :)

spróbuj dodać jeszcze tego w html zamiast tego twojego skryptu
<script type="text/javascript">
jQuery(".username").click(function(e) {
            e.preventDefault();
            jQuery(".username_menu").slideToggle("fast");
            jQuery(".username").toggleClass("username_menu_open");
        });
        jQuery(".username_menu").mouseup(function() {
            return false
        });
        jQuery(document).mouseup(function(e) {
            if(jQuery(e.target).parent("a.username").length==0) {
                jQuery(".username").removeClass("username_menu_open");
                jQuery(".username_menu").slideUp("fast",  function() {display: 'toggle'});;
            }
            
        });
</script>
Twój kod jest zupełnie inny i również nie działa jak powinien.

2 sposób odpada.
ahh, źle spojrzałem i u ciebie pisało usermenu a ja wpisałem username, zmień w tym 2 js-ie username na usermenu i zobacz czy zadziała



Użytkownicy przeglądający ten wątek:

1 gości