Verstecken mehrere divs innerhalb eines div - JQuery

Sorry die für noobish Frage, meine erste Website.Verstecken mehrere divs innerhalb eines div - JQuery

Ich möchte, dass, wenn das ".button" div angeklickt wird, alle divs innerhalb des ".container" -div ausgeblendet oder versteckt werden, aber es scheint nicht zu funktionieren. Ich würde es vorziehen, die js in einer separaten Datei zu halten.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>MAIN</title> 
    <link rel='stylesheet' type='text/css' href='style.css' /> 
    <script type='text/javascript' src='script.js'> </script> 
</head> 

<body> 
    <div class="container"> 
     <div class="top"> 
      MENU 
     </div> 
     <div class="button"> 
      ^^^
     </div> 
    </div> 
</body>

CSS

.top { 
    /* Border */ 
    border: 5px solid gray; 
    width: 100px; 
    background-color: black; 
    /*Positioning*/ 
    margin-left: 25%; 
    margin-right: 25%; 
    top: 10px; 
    left: 0px; 
    position: absolute; 
    /*Text*/ 
    text-align: center; 
    font-family: Arial; 
    font-weight: bold; 
    font-size: 20px; 
    color: white; 
} 

.container { 
    /*Border*/ 
    border: 10px solid gray; 
    width: 200px; 
    height: 200px; 
    background-color: black; 
    /*Positioning*/ 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 

.button { 
    /*Border*/ 
    border: 2px solid gray; 
    background-color: black; 
    width: 98%; 
    /*Positioning*/ 
    margin-top: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    /*Text*/ 
    text-align: center; 
    font-family: Arial; 
    font-size: 15px; 
    color: white; 
} 

.button:hover { 
    color: red; 
    font-weight: bold; 
}

JAVASCRIPT

$(document).ready(function() { 
    $('.button').click(function() { 
     $('.container').hide('fast'); 
    }); 
});

Quelle

2016-08-04 Shatzo Dat

'$ ('. Container'). Finden ('div'). Ausblenden ('fast');' verwenden Sie diese – guradio

so alle Inhalte innerhalb des Containers, aber nur diesen Container? Sie sind auch sicher, dass Sie alles ausblenden möchten, da der Knopf auch darin ist. –

Können Sie mit Alert testen ("irgendein Text"); zu sehen, dass das Click-Ereignis tatsächlich behandelt wird? – VinhNT

Wenn Sie alle div in Container wollen versteckt werden, können Sie verwenden:

$('.container>div').hide('fast');

So wird nur das div als direktes Kind des Containers ausgeblendet. gäbe es kein Gebrauch sein, um ein div innerhalb einer versteckten div :)

$(document).ready(function() { 
 
    $('.button').click(function() { 
 
     $('.container>div').hide('fast'); 
 
    }); 
 
});

.top { 
 
    /* Border */ 
 
    border: 5px solid gray; 
 
    width: 100px; 
 
    background-color: black; 
 
    /*Positioning*/ 
 
    margin-left: 25%; 
 
    margin-right: 25%; 
 
    top: 10px; 
 
    left: 0px; 
 
    position: absolute; 
 
    /*Text*/ 
 
    text-align: center; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    color: white; 
 
} 
 

 
.container { 
 
    /*Border*/ 
 
    border: 10px solid gray; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: black; 
 
    /*Positioning*/ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: relative; 
 
} 
 

 
.button { 
 
    /*Border*/ 
 
    border: 2px solid gray; 
 
    background-color: black; 
 
    width: 98%; 
 
    /*Positioning*/ 
 
    margin-top: 90%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    /*Text*/ 
 
    text-align: center; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    color: white; 
 
} 
 

 
.button:hover { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>MAIN</title> 
 
    <link rel='stylesheet' type='text/css' href='style.css' /> 
 
    <script type='text/javascript' src='script.js'> </script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     <div class="top"> 
 
      MENU 
 
     </div> 
 
     <div class="button"> 
 
      ^^^
 
     </div> 
 
    </div> 
 
</body>

Quelle

2016-08-04 03:12:36 technico

Ich glaube nicht, dass das das Problem lösen wird, da es nicht aussieht Wie jQuery ist in der Seite –

Amen zu Ihrem Kommentar enthalten, und Herrlichkeit, das Snippet-System auf das OP :) – technico

Ihr Code zu verstecken ist richtig, wenn Sie alle div auf .container div

ausblenden möchten aber Ihre Problem ist, dass Sie die Jquery in Ihre Webseite nicht eingeschlossen haben

Fügen Sie es auf Ihrer Webseite bei oben schließen Tag </body> oder bei <head>

<body> 
    <div class="container"> 
     <div class="top"> 
      MENU 
     </div> 
     <div class="button"> 
      ^^^
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

</body>

Oder

<head> 
    <title>MAIN</title> 
    <link rel='stylesheet' type='text/css' href='style.css' /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add this --> 
    <script type='text/javascript' src='script.js'> </script> 
</head>

Quelle

2016-08-04 03:23:41

-1

Vielen Dank allen für die hilfreichen Antworten. Ich habe es so funktionieren lassen, wie ich es beabsichtigt habe. Ich werde sicher sein, in Zukunft genauer zu sein.

Ich werde jetzt daran arbeiten, einen Button hinzuzufügen, damit dieser wieder erscheint (was mit diesem neuen Wissen einfach sein sollte).

Danke nochmal!

Quelle

2016-08-04 13:48:38

Verstecken mehrere divs innerhalb eines div - JQuery

Antwort

Verwandte Themen