当我单击父 div 时如何切换子 div

Question

I'm currently trying to create a dashboard for my website and i'm a pretty begginer with javascript. In this case i'm trying to create a code for toggling a div, i tried to create a function to click in a div with the class "togglebox", and make his child div "togglebox-body" toggle, but it isn't working.

 $("main").on('click', '.togglebox', function() { const thisBox = $(this).children(".togglebox-body") thisBox.toggle() })

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); /* Common */ html { padding: 0; margin: 0; font-family: 'Poppins', sans-serif; --primary: #111; --gray-dark-1: #191919; --gray-dark--2: #161616; --gray-dark-3: #151515; --border: #222; --text: #555; --text-2: #969696; --white: #fff; } body { background: var(--primary); color: var(--white); flex-grow: 1; margin: 32px auto; position: relative; width: auto; max-width: 540px; } a, p, span, h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; text-decoration: none; } h1, h2, h3, h4, h5 { line-height: 1.2em; } hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } input, textarea { padding: 15px 10px; background-color: var(--gray-dark-3); border: 1px solid var(--border); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 16px; } textarea:focus, input:focus { outline: none; } button { padding: 15px; background-color: var(--gray-dark-1); border: 1px solid var(--border); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 16px; cursor: pointer; } footer { font-size: 12px; color: var(--text) } footer a { color: inherit; text-decoration: underline; }::-webkit-scrollbar { width: 12px; }::-webkit-scrollbar-track { background: transparent; }::-webkit-scrollbar-thumb { border-radius: 16px; box-shadow: inset 0 0 10px 10px var(--border); border: solid 3px transparent; }::-webkit-scrollbar-thumb:hover { border-radius: 16px; box-shadow: inset 0 0 10px 10px var(--border); ; border: solid 3px transparent; } /* Utilities */.flex { display: flex; }.justify-content-center { justify-content: center; }.justify-content-space-between { justify-content: space-between; }.align-items-center { align-items: center; }.text-align-center { text-align: center; }.row-reverse { flex-direction: row-reverse; }.column { flex-direction: column; }.column-reverse { flex-direction: column-reverse; }.flex-grow { flex-grow: 1; }.width-100 { width: 100%; }.margin-0 { margin: 0; }.margin-1 { margin: .25rem; }.margin-2 { margin: .5rem; }.margin-3 { margin: .75rem; }.margin-4 { margin: 1rem; }.margin-5 { margin: 2rem; }.margin-top-1 { margin-top: .25rem; }.margin-top-2 { margin-top: .5rem; }.margin-top-3 { margin-top: .75rem; }.margin-top-4 { margin-top: 1rem; }.margin-top-5 { margin-top: 2rem; }.margin-bottom-1 { margin-bottom: .25rem; }.margin-bottom-2 { margin-bottom: .5rem; }.margin-bottom-3 { margin-bottom: .75rem; }.margin-bottom-4 { margin-bottom: 1rem; }.margin-bottom-5 { margin-bottom: 2rem; }.margin-left-1 { margin-left: .25rem; }.margin-left-2 { margin-left: .5rem; }.margin-left-3 { margin-left: .75rem; }.margin-left-4 { margin-left: 1rem; }.margin-left-5 { margin-left: 2rem; }.margin-right-1 { margin-right: .25rem; }.margin-right-2 { margin-right: .5rem; }.margin-right-3 { margin-right: .75rem; }.margin-right-4 { margin-right: 1rem; }.margin-right-5 { margin-right: 2rem; }.padding-0 { padding: 0; }.padding-1 { padding: .25rem; }.padding-2 { padding: .5rem; }.padding-3 { padding: .75rem; }.padding-4 { padding: 1rem; }.padding-5 { padding: 2rem; }.padding-top-1 { padding-top: .25rem; }.padding-top-2 { padding-top: .5rem; }.padding-top-3 { padding-top: .75rem; }.padding-top-4 { padding-top: 1rem; }.padding-top-5 { padding-top: 2rem; }.padding-bottom-1 { padding-bottom: .25rem; }.padding-bottom-2 { padding-bottom: .5rem; }.padding-bottom-3 { padding-bottom: .75rem; }.padding-bottom-4 { padding-bottom: 1rem; }.padding-bottom-5 { padding-bottom: 2rem; }.padding-left-1 { padding-left: .25rem; }.padding-left-2 { padding-left: .5rem; }.padding-left-3 { padding-left: .75rem; }.padding-left-4 { padding-left: 1rem; }.padding-left-5 { padding-left: 2rem; }.padding-right-1 { padding-right: .25rem; }.padding-right-2 { padding-right: .5rem; }.padding-right-3 { padding-right: .75rem; }.padding-right-4 { padding-right: 1rem; }.padding-right-5 { padding-right: 2rem; }.gap-1 { gap: .25rem; }.gap-2 { gap: .5rem; }.gap-3 { gap: .75rem; }.gap-4 { gap: 1rem; }.gap-5 { gap: 2rem; }.box { background-color: var(--gray-dark-1); border: 1px solid var(--border); } /* Animations */.scale-up { transition: 150ms; }.scale-up:hover { transition: 150ms; transform: scale(1.05); } /* Common */.avatar { border-radius: 100%; width: 96px; height: 96px; }.name { font-size: 18px; font-weight: 600; }.bio { font-size: 14px; }.link { padding: 15px; color: var(--text); } /* Blog Styling */ #post-wrapper { padding: 25px; color: var(--text); } #post-wrapper>hr { margin: 0; }.post-details { color: var(--text); font-size: 12px; }.post-title { color: var(--text-2); font-weight: 700; }.post-content { color: var(--text) } /* Dashboard */.togglebox { cursor: pointer; font-size: 16px; color: var(--text) }.togglebox::after { content: "\25BC"; } #link-manager-editor>a { cursor: move; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header class="flex column"> <div class="flex align-items-center justify-content-space-between"> <h3 class="text-align-center">Dashboard</h3> <a href="#" class="scale-up"> <img src="../assets/images/logout.png" alt="logout-icon"> </a> </div> <hr> </header> <main> <section id="link-manager" class="box flex column margin-bottom-4"> <div class="togglebox flex justify-content-space-between padding-3"> <p>Gerenciamento de Links</p> </div> <div class=""> <hr class="margin-0"> <div id="link-manager-editor" class="flex column gap-3 padding-3"> <a href="#" class="link text-align-center box scale-up">Tutoriais de WordPress </a> <a href="#" class="link text-align-center box scale-up">O Meu Encurtador De Link (Decreaser) </a> <a href="#" class="link text-align-center box scale-up">Projeto De Hospedagem De Arquivos Open Source </a> <a href="#" class="link text-align-center box scale-up">sarain.ag (Site Que Fiz No WordPress) </a> <a href="#" class="link text-align-center box scale-up">espacoviverpsicologia.com (Site Que Fiz No WordPress)</a> </div> </div> </section> <section id="blog-manager" class="box flex column"> <div class="togglebox flex justify-content-space-between padding-3"> <p>Gerenciamento do Blog</p> </div> <div class="togglebox-body"> <hr class="margin-0"> <div class="flex column gap-3 padding-3"> <div class="flex column gap-3"> <form id="blog-search" class="flex gap-3"> <input type="text" class="flex-grow" placeholder="Procure por algum post..."> <button type="submit" class="scale-up">Buscar</button> </form> </div> <div class="flex column gap-3"> <a href="#" class="box scale-up"> <img src="../assets/images/blog-placeholder.jpg" alt="blog-post-featured-image" class="width-100"> <div class="flex column gap-2 padding-4"> <h4 class="post-title">O Decreaser v3 está finalmente pronto? Quais aprendizados eu tirei desse projeto,</h4> <div class="post-content"> <p>O Decreaser foi um projeto que criei no começo de 2020 bem no começo da pandemia. onde est...</p> </div> </div> </a> </div> </div> </div> </section> </main>

Here is the JSFiddle https://jsfiddle.net/joaopcos/hd0ufbeg/

Answer 1

Your <div class="togglebox"> doesn't have children with class="togglebox-body" . It should be .siblings() . Yes, this also means that this inside your delegate handler doesn't point to <main> , it points to <div class="togglebox"> .

Structure

<div class="togglebox">
   Heading
</div>

<div class="togglebox-body">
   Inner Content
</div>

<!- togglebox and togglebox-body are siblings here -!>

Updated Code:

 $(".togglebox").click(function(){ const thisBox = $(this).siblings(".togglebox-body"); thisBox.toggle() })

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); /* Common */ html{ padding: 0; margin: 0; font-family: 'Poppins', sans-serif; --primary: #111; --gray-dark-1: #191919; --gray-dark--2: #161616; --gray-dark-3: #151515; --border: #222; --text: #555; --text-2: #969696; --white: #fff; } body{ background: var(--primary); color: var(--white); flex-grow: 1; margin: 32px auto; position: relative; width: auto; max-width: 540px; } a,p,span,h1,h2,h3,h4,h5{ margin: 0; font-weight: 400; text-decoration: none; } h1,h2,h3,h4,h5{ line-height: 1.2em; } hr{ width: 100%; border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } hr{ width: 100%; border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; } input,textarea{ padding: 15px 10px; background-color: var(--gray-dark-3); border: 1px solid var(--border); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 16px; } textarea:focus, input:focus{ outline: none; } button{ padding: 15px; background-color: var(--gray-dark-1); border: 1px solid var(--border); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 16px; cursor: pointer; } footer{ font-size: 12px; color: var(--text) } footer a{ color: inherit; text-decoration: underline; }::-webkit-scrollbar { width: 12px; }::-webkit-scrollbar-track { background: transparent; }::-webkit-scrollbar-thumb { border-radius: 16px; box-shadow: inset 0 0 10px 10px var(--border); border: solid 3px transparent; }::-webkit-scrollbar-thumb:hover { border-radius: 16px; box-shadow: inset 0 0 10px 10px var(--border);; border: solid 3px transparent; } /* Utilities */.flex{ display: flex; }.justify-content-center{ justify-content: center; }.justify-content-space-between{ justify-content: space-between; }.align-items-center{ align-items: center; }.text-align-center{ text-align: center; }.row-reverse{ flex-direction: row-reverse; }.column{ flex-direction: column; }.column-reverse{ flex-direction: column-reverse; }.flex-grow{ flex-grow: 1; }.width-100{ width: 100%; }.margin-0{ margin: 0; }.margin-1{ margin: .25rem; }.margin-2{ margin: .5rem; }.margin-3{ margin: .75rem; }.margin-4{ margin: 1rem; }.margin-5{ margin: 2rem; }.margin-top-1{ margin-top: .25rem; }.margin-top-2{ margin-top: .5rem; }.margin-top-3{ margin-top: .75rem; }.margin-top-4{ margin-top: 1rem; }.margin-top-5{ margin-top: 2rem; }.margin-bottom-1{ margin-bottom: .25rem; }.margin-bottom-2{ margin-bottom: .5rem; }.margin-bottom-3{ margin-bottom: .75rem; }.margin-bottom-4{ margin-bottom: 1rem; }.margin-bottom-5{ margin-bottom: 2rem; }.margin-left-1{ margin-left: .25rem; }.margin-left-2{ margin-left: .5rem; }.margin-left-3{ margin-left: .75rem; }.margin-left-4{ margin-left: 1rem; }.margin-left-5{ margin-left: 2rem; }.margin-right-1{ margin-right: .25rem; }.margin-right-2{ margin-right: .5rem; }.margin-right-3{ margin-right: .75rem; }.margin-right-4{ margin-right: 1rem; }.margin-right-5{ margin-right: 2rem; }.padding-0{ padding: 0; }.padding-1{ padding: .25rem; }.padding-2{ padding: .5rem; }.padding-3{ padding: .75rem; }.padding-4{ padding: 1rem; }.padding-5{ padding: 2rem; }.padding-top-1{ padding-top: .25rem; }.padding-top-2{ padding-top: .5rem; }.padding-top-3{ padding-top: .75rem; }.padding-top-4{ padding-top: 1rem; }.padding-top-5{ padding-top: 2rem; }.padding-bottom-1{ padding-bottom: .25rem; }.padding-bottom-2{ padding-bottom: .5rem; }.padding-bottom-3{ padding-bottom: .75rem; }.padding-bottom-4{ padding-bottom: 1rem; }.padding-bottom-5{ padding-bottom: 2rem; }.padding-left-1{ padding-left: .25rem; }.padding-left-2{ padding-left: .5rem; }.padding-left-3{ padding-left: .75rem; }.padding-left-4{ padding-left: 1rem; }.padding-left-5{ padding-left: 2rem; }.padding-right-1{ padding-right: .25rem; }.padding-right-2{ padding-right: .5rem; }.padding-right-3{ padding-right: .75rem; }.padding-right-4{ padding-right: 1rem; }.padding-right-5{ padding-right: 2rem; }.gap-1{ gap: .25rem; }.gap-2{ gap: .5rem; }.gap-3{ gap: .75rem; }.gap-4{ gap: 1rem; }.gap-5{ gap: 2rem; }.box{ background-color: var(--gray-dark-1); border: 1px solid var(--border); } /* Animations */.scale-up{ transition: 150ms; }.scale-up:hover{ transition: 150ms; transform: scale(1.05); } /* Common */.avatar{ border-radius: 100%; width: 96px; height: 96px; }.name{ font-size: 18px; font-weight: 600; }.bio{ font-size: 14px; }.link{ padding: 15px; color: var(--text); } /* Blog Styling */ #post-wrapper{ padding: 25px; color: var(--text); } #post-wrapper>hr{ margin: 0; }.post-details{ color: var(--text); font-size: 12px; }.post-title{ color: var(--text-2); font-weight: 700; }.post-content{ color: var(--text) } /* Dashboard */.togglebox{ cursor: pointer; font-size: 16px; color: var(--text) }.togglebox::after{ content: "\25BC"; } #link-manager-editor>a{ cursor: move; }

 <,DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>joaopcos.xyz/admin/ — Dashboard</title> <link rel="stylesheet" href="../assets/css/style.css"> </head> <body> <header class="flex column"> <div class="flex align-items-center justify-content-space-between"> <h3 class="text-align-center">Dashboard</h3> <a href="#" class="scale-up"> <img src="../assets/images/logout.png" alt="logout-icon"> </a> </div> <hr> </header> <main> <section id="link-manager" class="box flex column margin-bottom-4"> <div class="togglebox flex justify-content-space-between padding-3"> <p>Gerenciamento de Links</p> </div> <div class="togglebox-body"> <hr class="margin-0"> <div id="link-manager-editor" class="flex column gap-3 padding-3"> <a href="#" class="link text-align-center box scale-up">Tutoriais de WordPress </a> <a href="#" class="link text-align-center box scale-up">O Meu Encurtador De Link (Decreaser) </a> <a href="#" class="link text-align-center box scale-up">Projeto De Hospedagem De Arquivos Open Source </a> <a href="#" class="link text-align-center box scale-up">sarain.ag (Site Que Fiz No WordPress) </a> <a href="#" class="link text-align-center box scale-up">espacoviverpsicologia.com (Site Que Fiz No WordPress)</a> </div> </div> </section> <section id="blog-manager" class="box flex column"> <div class="togglebox flex justify-content-space-between padding-3"> <p>Gerenciamento do Blog</p> </div> <div class="togglebox-body"> <hr class="margin-0"> <div class="flex column gap-3 padding-3"> <div class="flex column gap-3"> <form id="blog-search" class="flex gap-3"> <input type="text" class="flex-grow" placeholder="Procure por algum post..."> <button type="submit" class="scale-up">Buscar</button> </form> </div> <div class="flex column gap-3"> <a href="#" class="box scale-up"> <img src="../assets/images/blog-placeholder?jpg" alt="blog-post-featured-image" class="width-100"> <div class="flex column gap-2 padding-4"> <h4 class="post-title">O Decreaser v3 está finalmente pronto, Quais aprendizados eu tirei desse projeto.</h4> <div class="post-content"> <p>O Decreaser foi um projeto que criei no começo de 2020 bem no começo da pandemia. onde est.:.</p> </div> </div> </a> </div> </div> </div> </section> </main> <script src="https.//code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> </body> </html>