show/hide mit jquery

Ich habe Probleme beim Verbergen und Anzeigen des P-Tags. Könnte mir jemand mit diesem Code helfen? Was ich bin versucht zu erreichen ist, dass, wenn Sie auf die Schaltfläche ausblenden klicken, der Inhalt ist ausgeblendet. Wenn Sie bereit sind, den Inhalt anzuzeigen, klicken Sie auf die Schaltfläche "Anzeigen". Ich weiß, Sie können das Toggle verwendet, aber ich möchte nicht, dass esshow/hide mit jquery

<!DOCTYPE html> <!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(value){ 
    $("button").click(function(value){ 
    if (value==="hide"){ 
     $("p").hide();} 
    else 
      $("p").show(); 
    }); 
}); 
</script> 
</head> 

<body> 
<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button value="hide">Hide me</button> 
<button value="show">Show me</button> 
</body> 
</html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(value){ 
    $("button").click(function(value){ 
    if (value==="hide"){ 
     $("p").hide();} 
    else 
      $("p").show(); 
    }); 
}); 
</script> 
</head> 

<body> 
<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button value="hide">Hide me</button> 
<button value="show">Show me</button> 
</body> 
</html>

Quelle

2010-12-09 user244394

Sie können nicht mehrere haben ' ID's mit dem gleichen Namen. Verwenden Sie stattdessen 'class' es. –

@patrick - nicht eindeutige IDs Ungültiges HTML-Markup. –

@Charles - Ja, eine Unterscheidung war impliziert, dass ich nicht vorhatte. Ich hätte den ungültigen Aufschlag zusätzlich zu dem angeben müssen, auf den karim79 bereits hingewiesen hat. Nämlich das Schließen von HTML-Tags mit '}' anstelle von '>'. – user113716

Derzeit tun funktioniert nicht mit mehreren Inhalt.

Das liegt daran, dass Sie doppelte IDs auf Ihrer Seite haben. Um dies zu beheben, verwenden Sie Klassen und zielen auf die nächste .slickbox div vom klickten Anker:

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400); 
    return false; 
});

..und die IDs zu Klassen ändern, zB:

<a class="slick-toggle" href="#">Toggle the box</a> 
<div style="position:relative; outline: 1px dashed orange; padding:100px;"> 
    <div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;"> 
     <h2> music nsme</h2> 
     <p>This is the box that will be shown and hidden and togg </p> 
    </div> 
</div>

Quelle

2010-12-09 20:53:16 karim79

Ein wenig schwer mit dem Zustand des Markups zu sagen, aber ich denke, dass jede Slickbox ein Kind des nächsten 'div' Geschwister zu jedem' Slick-Toggle' ist. – user113716

@patrick dw - Ich denke du hast Recht. Ich habe meine Antwort aktualisiert. Danke :) – karim79

karim79: Gern geschehen, obwohl der von Ihnen angegebene HTML-Code nicht Ihre korrekte js-Code-Lösung widerspiegelt. Ich hoffe, es macht Ihnen nichts aus, dass ich es aktualisiert habe. – user113716

Antwort

Verwandte Themen