Avatar billede kasbas91 Nybegynder
31. oktober 2010 - 19:23 Der er 4 kommentarer og
1 løsning

Hej jeg tænkte på om der var nogen der havde tid til at hjælpe mig, med nogle jquery bokse..

Hej eksperten.dk

Jeg har sådan nogle iconer, hvor man trykker på dem så kommer der en boks med noget tekst i...

Og de virker også helt fint..

Men jeg vil gerne have sådan at man kun kan åbne en af gangen, så hvis man har en åben i forvejen og man prøver at åbne en anden, så skal den der var åben lukkes... Hvis i forstår...


I kan se siden her, :

http://empresa.prowdesign.dk/people/profile.php#

Der er tre iconer ved logoet...

Og her er koden til de 3 iconer...



var state = false;
$(document).ready(function() {             
    $('#EmFriend').click(function(e) {
        e.stopPropagation();
        if(!state) {
            $("#EmFriendrequests").css("display", "block");
            $("#EmFriend").addClass("EmFriendrequestsBtnToggler");
            state = true;
        }else {
            $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
            $('#EmFriendrequests').hide();
            state = false;
        }
               
    });
   
    $('#EmNotifi').click(function(e) {
        e.stopPropagation();
        if(!state) {
            $("#EmNotifications").css("display", "block");
            $("#EmNotifi").addClass("EmNotificationsBtnToggler");
            state = true;
        }else {
            $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
            $('#EmNotifications').hide();
            state = false;
        }
               
    });
   
    $('#EmMessage').click(function(e) {
        e.stopPropagation();
        if(!state) {
            $("#EmMessages").css("display", "block");
            $("#EmMessage").addClass("EmMessagesBtnToggler");
            state = true;
        }else {
            $("#EmMessage").removeClass("EmMessagesBtnToggler");
            $('#EmMessages').hide();
            state = false;
        }
               
    });
   
    $(document).click(function() {
        if(state) {
            $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
            $('#EmFriendrequests').hide();
           
            $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
            $('#EmNotifications').hide();

            $("#EmMessage").removeClass("EmMessagesBtnToggler");
            $('#EmMessages').hide();
            state = false;
        }
    });
});


// HTML.

<div id="EmPack">
<div id="EmFriend"><a href="#" title="Friend Requests"></a></div>
<div id="EmNotifi"><a href="#" title="Notifications"></a></div>
<div id="EmMessage"><a href="#" title="Your Messages"></a></div>
<div id="EmFriendrequests" style="display: none;"><p style="font-weight: bold;">Friend Requests ( <?php echo friendrequests_count( $mysqli ); ?> ).</p></div>
<div id="EmNotifications" style="display: none;"><p style="font-weight: bold;">Notifications ( <?php echo notifikation_count( $mysqli ); ?> ).</p></div>
<div id="EmMessages" style="display: none;"><p style="font-weight: bold;">Your Messages ( <?php $output = yourmessages_count( $mysqli ); ?> ).</p></div>
</div> <!-- EmPack ends here -->


Håber i kan vise mig hvordan man gør, altså lære mig det. måske.

Tak... ;P
Avatar billede softspot Forsker
31. oktober 2010 - 19:35 #1
Jeg vil mene at du blot behøver at indsætte linien

$("#EmFriendrequests,#EmNotifications,#EmMessages").hide();

hver gang du skal til at "åbne" et lag.

Eksempelvis:

    $('#EmMessage').click(function(e) {
        e.stopPropagation();
        if(!state) {
            $("#EmFriendrequests,#EmNotifications,#EmMessages").hide();
            $("#EmMessages").css("display", "block");
            $("#EmMessage").addClass("EmMessagesBtnToggler");
            state = true;
        }else {
            $("#EmMessage").removeClass("EmMessagesBtnToggler");
            $('#EmMessages').hide();
            state = false;
        }
               
    });

I stedet for

$("#EmMessages").css("display", "block");

kan du i øvrigt nok bruge

$("#EmMessages").show();

hvilket gør koden lidt kortere (og en lille smule lettere at læse).
Avatar billede kasbas91 Nybegynder
31. oktober 2010 - 21:15 #2
Mange tak for det, men jeg har lige et spørgsmål mere. Hvordan kan det være at når jeg har åbnet en af de iconer, også mens den er åben og jeg vil trykke på et andet icon, så skal man dobbeltklikke.. Hvorfor kan man ikke gøre det ved enkelt klik...

Som i kan prøve at se her:

http://empresa.prowdesign.dk/people/profile.php#

Prøv at åben en icon ved at klikke på et, og mens det er åbent, så prøv at klikke på et andet... ;P Håber i forstår mig.. ;P



var state = false;
$(document).ready(function() {             
    $('#EmFriend').click(function(e) {
        e.stopPropagation();
        if(!state) {
            $("#EmNotifications, #EmMessages").hide();
            $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
            $("#EmMessage").removeClass("EmMessagesBtnToggler");
           
            $("#EmFriendrequests").show();
            $("#EmFriend").addClass("EmFriendrequestsBtnToggler");
            state = true;
        }else {
            $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
            $('#EmFriendrequests').hide();
            state = false;
        }
               
    });
   
    $('#EmNotifi').click(function(e) {
        e.stopPropagation();
        if(!state) {
            $("#EmFriendrequests, #EmMessages").hide();
            $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
            $("#EmMessage").removeClass("EmMessagesBtnToggler");
           
            $("#EmNotifications").show();
            $("#EmNotifi").addClass("EmNotificationsBtnToggler");
            state = true;
        }else {
            $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
            $('#EmNotifications').hide();
            state = false;
        }
               
    });
   
    $('#EmMessage').click(function(e) {
        e.stopPropagation();
        if(!state) {
            $("#EmFriendrequests, #EmNotifications").hide();
            $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
            $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
           
            $("#EmMessages").show();
            $("#EmMessage").addClass("EmMessagesBtnToggler");
            state = true;
        }else {
            $("#EmMessage").removeClass("EmMessagesBtnToggler");
            $('#EmMessages').hide();
            state = false;
        }
               
    });
   
    $(document).click(function() {
        if(state) {
            $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
            $('#EmFriendrequests').hide();
           
            $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
            $('#EmNotifications').hide();

            $("#EmMessage").removeClass("EmMessagesBtnToggler");
            $('#EmMessages').hide();
            state = false;
        }
    });
});

Avatar billede softspot Forsker
31. oktober 2010 - 22:03 #3
Det er fordi state er sat til true når en popup er åben og hvis du klikker direkte på en knap som åbner en anden popup, vil den først skulle lukke den der er åben (og dermed sætte state til false) inden du kan åbne den nye popup. Du skal altså finde en anden måde at styre tilstanden på.

Det kræver nok en lidt anden strategi mht. styring af synligheden.

Hvad sker der hvis du undlader at bruge state-variablen og blot stoler på at e.stopPropagation sørger for at click-eventet på document ikke fyres, når duer klikkes på knapperne til at åbne popup'erne?

Så kan du i stedet basere dine check i de tre knapper på synligheden af en popup, i stedet for at vedligeholde en state-variabel. Jeg forestiller mig noget i stil med:

var state = false;
function hidePopups() {
    $("#EmFriendrequests, #EmNotifications, #EmMessages").hide();
    $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
    $("#EmMessage").removeClass("EmMessagesBtnToggler");
    $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
    state = false;
}
$(document).ready(function() {             
    $('#EmFriend').click(function(e) {
        e.stopPropagation();
        if(!$("#EmFriendrequests").is(":visible")) {
            hidePopups();
           
            $("#EmFriendrequests").show();
            $("#EmFriend").addClass("EmFriendrequestsBtnToggler");
            state = true;
        }else {
            $("#EmFriend").removeClass("EmFriendrequestsBtnToggler");
            $('#EmFriendrequests').hide();
            state = false;
        }
               
    });
   
    $('#EmNotifi').click(function(e) {
        e.stopPropagation();
        if(!$("#EmNotifications").is(":visible")) {
            hidePopups();
           
            $("#EmNotifications").show();
            $("#EmNotifi").addClass("EmNotificationsBtnToggler");
            state = true;
        }else {
            $("#EmNotifi").removeClass("EmNotificationsBtnToggler");
            $('#EmNotifications').hide();
            state = false;
        }
               
    });
   
    $('#EmMessage').click(function(e) {
        e.stopPropagation();
        if(!$("#EmMessages").is(":visible")) {
            hidePopups();
           
            $("#EmMessages").show();
            $("#EmMessage").addClass("EmMessagesBtnToggler");
            state = true;
        }else {
            $("#EmMessage").removeClass("EmMessagesBtnToggler");
            $('#EmMessages').hide();
            state = false;
        }
               
    });
   
    $(document).click(function() {
        if(state) {
            hidePopups();
        }
    });
});

Jeg har tilladt mig at trække skjulning af popup'erne ud i en separat funktion og så flotte mig med at skjule alle lag uanset om det så lige er nødvendigt (det kan der givetvis optimeres lidt på). Det bevirker at koden bliver lidt mere kompakt.

Jeg har ligeledes bibeholdt state-variablen til at optimere kaldene til hidePopups, således den kun kaldes når det er nødvendigt. Hvis state ikke vedligeholdes kommer kan til at lave et opslag i DOM hver gang der klikkes på siden, hvilket jo ikke er optimalt...

Ovenstående kode er komplet utestet, men det illustrerer vist nogenlunde idéen.

Jeg tror desuden du kan slanke koden yderligere ved at ændre lidt i måden du tildeler CSS-klasser, men det vil jeg ikke komme ind på i denne omgang.
Avatar billede kasbas91 Nybegynder
31. oktober 2010 - 22:27 #4
Ja rigtig mange mange tak for det... ;P

OG det virker og det hele, jeg tror jeg måske er ved at forstå det

lidt bedre... hehe.

læg et svar hvis der ønskes point _ ;P
Avatar billede softspot Forsker
31. oktober 2010 - 22:34 #5
Velbekomme :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester