Problem Umschalten Klasse (Jquery)

Ich kann nicht scheinen, die new-album zu erscheinen und verschwinden. Wenn ich console.log("here") in die click-Funktion einfüge, wird nichts auf die Konsole gedruckt. Ich sehe jedoch nicht, was mit der Art und Weise falsch ist, wie ich auf die test-Verbindung zugegriffen habe.Problem Umschalten Klasse (Jquery)

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
    $(".content").toggleClass("new-album"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li id="test"><a href="#">New Album</a></li> 
 
    <li><a href="#">New Photo</a></li> 
 
    <li id="login"><a href="#">Login</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="content"> 
 
    <div class="new-album"> 
 
    ... 
 
    </div> 
 
    ... 
 
</div>

Quelle

2017-03-22 stumped

dies scheint für mich in Ordnung zu arbeiten (Klasse wechselt). Verwenden Sie CSS, um das Element basierend auf der Klasse .new-album anzuzeigen/auszublenden? –

'.new-album' ist jetzt ein blaues Rechteck, und ich möchte, dass der Link es ein-/ausblendet – stumped

Im Moment fügen Sie gerade die Klasse' neues-Album' an 'content' an, tun Sie Möchten Sie die Sichtbarkeit der Klasse 'new-album' ändern (das ist ein Geschwister von' content' und nicht 'content' selbst), wenn Sie auf diesen Link klicken? – Ravenous

Sie können eine active Klasse auf dem Element, das Sie zum Anzeigen/Verbergen wollen wechseln sich, und indem Sie opacity anstelle von display verwenden, können Sie den Prozess auch animieren.

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
     $(".content").find(".new-album").toggleClass('active'); 
 
    }); 
 
});

.new-album { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: blue; 
 
    transition: opacity 1s linear; 
 
    opacity: 0; 
 
} 
 

 
.active { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="index.php">Home</a></li> 
 
       <li id="test"><a href="#">New Album</a></li> 
 
       <li><a href="#">New Photo</a></li> 
 
       <li id="login"><a href="#">Login</a></li> 
 
      </ul> 
 
     </nav> 
 

 
     <div class="content"> 
 
      <div class="new-album"> 
 
       ... 
 
      </div> 
 
     </div> 
 
</body>

Quelle

2017-03-22 23:27:26 Ravenous

einfach eine Klasse Makeln nicht zeigen/verstecken Sie Element. Zu dieser Klasse müssen CSS-Regeln gehören.

Dies wird anzeigen/ausblenden .new-album Link jedes Mal Element das neue Album geklickt wird

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
    $(".content").toggleClass("show-new-album"); 
 
    }); 
 
});

.new-album { 
 
    display: none; 
 
} 
 

 
.show-new-album .new-album { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li id="test"><a href="#">New Album</a></li> 
 
    <li><a href="#">New Photo</a></li> 
 
    <li id="login"><a href="#">Login</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="content"> 
 
    <div class="new-album"> 
 
    ... 
 
    </div> 
 
</div>

Quelle

2017-03-22 23:23:54

Dies geschieht in der Regel, wenn mehrere Ereignisse auf dem gleichen Ereignis ausgeführt werden. Versuchen Sie, zu .mouseUp anstelle von .click zu wechseln.

Quelle

2017-03-23 00:12:49 Maarten

Wenn Sie es ein wenig optimiert haben, können Sie immer noch den Toggle verwenden, aber eine Klasse hinzufügen/entfernen, um den Show/Hide-Effekt zu aktivieren. Schauen Sie sich die (Arbeits-) Snippet

this helps

$(document).ready(function() { 
 
    $('#test a').click(function() { 
 
     $(".new-album").toggleClass("show"); 
 
    }); 
 
    
 
});

nav { 
 
    display: block; 
 
    } 
 
    a{ 
 
    color: #000000; 
 
} 
 
a:hover{ color:red;} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
ul li a { 
 
    margin-left: 5px; 
 
    text-decoration: none; 
 
} 
 
p{ 
 
width:100%; 
 
text-align:left; 
 
} 
 

 
.content { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.new-album { 
 
    display: block; 
 
} 
 

 
.show { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li id="test"><a href="#album1">New Album</a></li> 
 
    <li><a href="#">New Photo</a></li> 
 
    <li id="login"><a href="#">Login</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="content"> 
 
    <div class="new-album show"> 
 
    <a id="album1"></a> 
 
    <p>Check out the National's new album - it rocks!</p> 
 
    </div> 
 
</div>

Quelle

2017-03-23 01:43:40

Klicken Sie auf den Link" Neues Album " –

Problem Umschalten Klasse (Jquery)

Antwort

Verwandte Themen