堆栈内存溢出
  简体   繁体   English

JavaScript/jQuery 多级手风琴不会关闭复选框

[英]JavaScript/jQuery multi-level accordion won't close checkboxes

 原文  2020-03-08 01:57:17  1   1    javascript/ jquery/ html/ css

问题描述

When I click on one of the 'main' checkboxes it opens but when I click on the other 'main' checkbox it does not close the previous checkbox.当我单击其中一个“主要”复选框时，它会打开，但当我单击另一个“主要”复选框时，它不会关闭上一个复选框。 Also if I open one of the 'main' checkboxes then click on a checkbox inside it won't expand that checkbox but instead it closes the 'main' checkbox and then none of the checkboxes open without reloading the page, see example here .此外，如果我打开“主要”复选框之一，然后单击其中的一个复选框，它不会展开该复选框，而是关闭“主要”复选框，然后在不重新加载页面的情况下不会打开任何复选框，请参见此处的示例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Settings</title>
        <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div id="accordion">
            <div class="accordion-tab">
                <input type="checkbox" id="checkbox-1" class="accordion-input" name="accordion">
                <label class="accordion-label" for="checkbox-1"></label>
                <div class="accordion-content">
                    <div class="accordion-info">
                        <div class="platform-image"></div>
                        <span class="platform-name">Lorem ipsum</span>
                    </div>
                    <div class="total-games">
                        <span>Lorem ipsum</span>
                    </div>
                </div>

                <div class="accordion-tab-content">
                    <div class="wrapper">
                        <div class="accordion-tab">
                            <input type="checkbox" id="checkbox-2" class="accordion-input" name="sub-accordion">
                            <label class="accordion-label" for="checkbox-2"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="accordion-tab">
                <input type="checkbox" id="checkbox-3" class="accordion-input" name="accordion">
                <label class="accordion-label" for="checkbox-3"></label>
                <div class="accordion-content">
                    <div class="accordion-info">
                        <div class="platform-image"></div>
                        <span class="platform-name">Lorem ipsum</span>
                    </div>
                    <div class="total-games">
                        <span>Lorem ipsum</span>
                    </div>
                </div>

                <div class="accordion-tab-content">
                    <div class="wrapper">
                        <div class="accordion-tab">
                            <input type="checkbox" id="checkbox-4" class="accordion-input" name="sub-accordion">
                            <label class="accordion-label" for="checkbox-4"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                      <div class="accordion-tab">
                            <input type="checkbox" id="checkbox-5" class="accordion-input" name="sub-accordion">
                            <label class="accordion-label" for="checkbox-5"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script type="text/javascript" src="./script.js"></script>
    </body>
</html>

body {
    background-color: #6fcae7;
    overflow-y: scroll;
    overflow-x: hidden;
}

#accordion {
    margin: 50px 0 0;
    font-family: "Poppins", sans-serif;
}

.accordion-tab {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 10px; /* 10px adds to bottom */
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #ececec;
}

.accordion-tab:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11);
}

.accordion-input {
    display: none;
}

.accordion-input:checked ~ .accordion-content + .accordion-tab-content {
    max-height: 3000px;
}

.accordion-input:checked ~ .accordion-content:after {
    transform: rotate(0);
}

.accordion-label {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 80px;
    z-index: 1;
    cursor: pointer;
}

.accordion-content {
    position: relative;
    height: 80px;
    padding: 0 87px 0 30px;
    white-space: nowrap;
}

.accordion-content:before, .accordion-content:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
}

.accordion-content:before {
    height: 100%;
}

.accordion-label:hover ~ .accordion-content:after {
  background-image: url("accordion-arrow-hover.svg");
}

.accordion-content:after {
    width: 24px;
    height: 100%;
    background-image: url("accordion-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
}

.accordion-content + .accordion-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s;
}

.accordion-content > div, .total-games > div {
    display: inline-block;
    vertical-align: middle;
}

.accordion-info {
    width: 95%;
}

.accordion-tab-content {
    background-color: #f9f9f9;
    color: #363636;
    font-size: 13px;
    font-weight: 400;
    border-radius: 0 0 4px 4px;
}

.wrapper {
  padding: 50px;
}

.platform-image {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: #e4e4e4;
    vertical-align: middle;
}

.platform-name {
    font-size: 14px;
    color: #242a32;
    width: 75%;
    margin-left: 16px;
    font-weight: 500;
    color: #242a32;
    vertical-align: middle;
}

.total-games {
    font-size: 14px;
    color: #5d5d5d;
}

.game-image {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: #e4e4e4;
    vertical-align: middle;
}

.game-name {
    font-size: 14px;
    color: #242a32;
    width: 75%;
    margin-left: 16px;
    font-weight: 500;
    color: #242a32;
    vertical-align: middle;
}

.game-metadata {
    font-size: 14px;
    color: #5d5d5d;
}

$(".accordion-content").click(function(e) {
  $this
    .parent()
    .parent()
    .find(".accordion-content")
    .removeClass("show");
  $this
    .parent()
    .parent()
    .find(".accordion-tab-content")
    .slideUp(350);
  $this.next().toggleClass("show");
});

$("[name='accordion']").on("click", function() {
  $("[name='accordion']")
    .not($(this))
    .prop("checked", false);
  $(this).prop("checked", $(this).prop("checked"));
  if (!$(this).prop("checked"))
    $(this)
      .siblings(".accordion-tab-content")
      .find("input")
      .prop("checked", false);
});

$("[name='sub-accordion']").on("click", function() {
  $("[name='sub-accordion']")
    .not($(this))
    .prop("checked", false);
  $(this).prop("checked", $(this).prop("checked"));
  if (!$(this).prop("checked"))
    $(this)
      .siblings(".accordion-tab-content")
      .find("input")
      .prop("checked", false);
});

1 个解决方案

解决方案1
 2 已采纳  2020-03-08 02:03:55

Change type attribute checkbox to radio .将type属性checkbox更改为radio 。 

 $('.accordion-tab-content').click(function(e) { e.preventDefault(); var $this = $(this); if ($this.next().hasClass('show')) { $this.next().removeClass('show'); $this.next().slideUp(350); } else { $this.parent().parent().find('.accordion-tab').removeClass('show'); $this.parent().parent().find('.accordion-tab-content').slideUp(350); $this.next().toggleClass('show'); $this.next().slideToggle(350); } });
 body { background-color: #6fcae7; overflow-y: scroll; overflow-x: hidden; } #accordion { margin: 50px 0 0; font-family: "Poppins", sans-serif; } .accordion-tab { position: relative; width: 100%; max-width: 1000px; margin: 0 auto 10px; /* 10px adds to bottom */ border-radius: 4px; background-color: #ffffff; box-shadow: 0 0 0 1px #ececec; } .accordion-tab:hover { box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11); } .accordion-input { display: none; } .accordion-input:checked ~ .accordion-content + .accordion-tab-content { max-height: 3000px; } .accordion-input:checked ~ .accordion-content:after { transform: rotate(0); } .accordion-label { position: absolute; width: 100%; height: 100%; max-height: 80px; z-index: 1; cursor: pointer; } .accordion-content { position: relative; height: 80px; padding: 0 87px 0 30px; white-space: nowrap; } .accordion-content:before, .accordion-content:after { content: ''; display: inline-block; vertical-align: middle; } .accordion-content:before { height: 100%; } .accordion-label:hover ~ .accordion-content:after { background-image: url("accordion-arrow-hover.svg"); } .accordion-content:after { width: 24px; height: 100%; background-image: url("accordion-arrow.svg"); background-repeat: no-repeat; background-position: center; transform: rotate(180deg); } .accordion-content + .accordion-tab-content { max-height: 0; overflow: hidden; transition: max-height .3s; } .accordion-content > div, .total-games > div { display: inline-block; vertical-align: middle; } .accordion-info { width: 95%; } .accordion-tab-content { background-color: #f9f9f9; color: #363636; font-size: 13px; font-weight: 400; border-radius: 0 0 4px 4px; } .wrapper { padding: 50px; } .platform-image { display: inline-block; height: 44px; width: 44px; border-radius: 50%; background-color: #e4e4e4; vertical-align: middle; } .platform-name { font-size: 14px; color: #242a32; width: 75%; margin-left: 16px; font-weight: 500; color: #242a32; vertical-align: middle; } .total-games { font-size: 14px; color: #5d5d5d; } .game-image { display: inline-block; height: 44px; width: 44px; border-radius: 50%; background-color: #e4e4e4; vertical-align: middle; } .game-name { font-size: 14px; color: #242a32; width: 75%; margin-left: 16px; font-weight: 500; color: #242a32; vertical-align: middle; } .game-metadata { font-size: 14px; color: #5d5d5d; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Settings</title> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="accordion"> <div class="accordion-tab"> <input type="radio" id="checkbox-1" class="accordion-input" name="accordion"> <label class="accordion-label" for="checkbox-1"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="platform-image"></div> <span class="platform-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div class="accordion-tab"> <input type="checkbox" id="checkbox-2" class="accordion-input" name="sub-accordion-1"> <label class="accordion-label" for="checkbox-2"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="game-image"></div> <span class="game-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span> </div> </div> </div> </div> </div> </div> </div> <div class="accordion-tab"> <input type="radio" id="checkbox-3" class="accordion-input" name="accordion"> <label class="accordion-label" for="checkbox-3"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="platform-image"></div> <span class="platform-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div class="accordion-tab"> <input type="checkbox" id="checkbox-4" class="accordion-input" name="sub-accordion-2"> <label class="accordion-label" for="checkbox-4"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="game-image"></div> <span class="game-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span> </div> </div> </div> </div> <div class="accordion-tab"> <input type="checkbox" id="checkbox-5" class="accordion-input" name="sub-accordion-2"> <label class="accordion-label" for="checkbox-5"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="game-image"></div> <span class="game-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span> </div> </div> </div> </div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script type="text/javascript" src="./script.js"></script> </body> </html>

Use jQuery to implement pseudo radio button via checkbox.使用jQuery通过checkbox实现伪单选按钮。 

 $(".accordion-content").click(function(e) { $this .parent() .parent() .find(".accordion-content") .removeClass("show"); $this .parent() .parent() .find(".accordion-tab-content") .slideUp(350); $this.next().toggleClass("show"); }); $("[name='accordion']").on("click", function() { $("[name='accordion']") .not($(this)) .prop("checked", false); $(this).prop("checked", $(this).prop("checked")); if (!$("[name='accordion']").prop("checked")) $(".accordion-tab-content") .find(" input") .prop("checked", false); });
 body { background-color: #6fcae7; overflow-y: scroll; overflow-x: hidden; } #accordion { margin: 50px 0 0; font-family: "Poppins", sans-serif; } .accordion-tab { position: relative; width: 100%; max-width: 1000px; margin: 0 auto 10px; /* 10px adds to bottom */ border-radius: 4px; background-color: #ffffff; box-shadow: 0 0 0 1px #ececec; } .accordion-tab:hover { box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11); } .accordion-input { display: none; } .accordion-input:checked~.accordion-content+.accordion-tab-content { max-height: 3000px; } .accordion-input:checked~.accordion-content:after { transform: rotate(0); } .accordion-label { position: absolute; width: 100%; height: 100%; max-height: 80px; z-index: 1; cursor: pointer; } .accordion-content { position: relative; height: 80px; padding: 0 87px 0 30px; white-space: nowrap; } .accordion-content:before, .accordion-content:after { content: ''; display: inline-block; vertical-align: middle; } .accordion-content:before { height: 100%; } .accordion-label:hover~.accordion-content:after { background-image: url("accordion-arrow-hover.svg"); } .accordion-content:after { width: 24px; height: 100%; background-image: url("accordion-arrow.svg"); background-repeat: no-repeat; background-position: center; transform: rotate(180deg); } .accordion-content+.accordion-tab-content { max-height: 0; overflow: hidden; transition: max-height .3s; } .accordion-content>div, .total-games>div { display: inline-block; vertical-align: middle; } .accordion-info { width: 95%; } .accordion-tab-content { background-color: #f9f9f9; color: #363636; font-size: 13px; font-weight: 400; border-radius: 0 0 4px 4px; } .wrapper { padding: 50px; } .platform-image { display: inline-block; height: 44px; width: 44px; border-radius: 50%; background-color: #e4e4e4; vertical-align: middle; } .platform-name { font-size: 14px; color: #242a32; width: 75%; margin-left: 16px; font-weight: 500; color: #242a32; vertical-align: middle; } .total-games { font-size: 14px; color: #5d5d5d; } .game-image { display: inline-block; height: 44px; width: 44px; border-radius: 50%; background-color: #e4e4e4; vertical-align: middle; } .game-name { font-size: 14px; color: #242a32; width: 75%; margin-left: 16px; font-weight: 500; color: #242a32; vertical-align: middle; } .game-metadata { font-size: 14px; color: #5d5d5d; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Settings</title> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="accordion"> <div class="accordion-tab"> <input type="checkbox" id="checkbox-1" class="accordion-input" name="accordion"> <label class="accordion-label" for="checkbox-1"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="platform-image"></div> <span class="platform-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div class="accordion-tab"> <input type="checkbox" id="checkbox-2" class="accordion-input" name="sub-accordion-1"> <label class="accordion-label" for="checkbox-2"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="game-image"></div> <span class="game-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span> </div> </div> </div> </div> </div> </div> </div> <div class="accordion-tab"> <input type="checkbox" id="checkbox-3" class="accordion-input" name="accordion"> <label class="accordion-label" for="checkbox-3"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="platform-image"></div> <span class="platform-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div class="accordion-tab"> <input type="checkbox" id="checkbox-4" class="accordion-input" name="sub-accordion-2"> <label class="accordion-label" for="checkbox-4"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="game-image"></div> <span class="game-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span> </div> </div> </div> </div> <div class="accordion-tab"> <input type="checkbox" id="checkbox-5" class="accordion-input" name="sub-accordion-2"> <label class="accordion-label" for="checkbox-5"></label> <div class="accordion-content"> <div class="accordion-info"> <div class="game-image"></div> <span class="game-name">Lorem ipsum</span> </div> <div class="total-games"> <span>Lorem ipsum</span> </div> </div> <div class="accordion-tab-content"> <div class="wrapper"> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span> </div> </div> </div> </div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script type="text/javascript" src="./script.js"></script> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery多层次手风琴 - jquery multi level accordion 在javascript / jquery中解析多层嵌套json - Parsing multi-level nested json in javascript/jquery 垂直多级手风琴菜单和document.getElementById（“ side_bar_t”）。innerHTML - Vertical multi-level accordion menu and document.getElementById(“side_bar_t”).innerHTML jQuery将无法在多级依赖？ - jquery won't work in multi level dependency? CSS多层手风琴菜单—指针和图标 - CSS Multi-Level Accordion Menu — Pointer & Icon 手风琴打开但不会关闭 - Accordion Opens But Won't Close 使用多级源映射调试Javascript - Debug Javascript with multi-level source maps JavaScript 多级继承和 isPrototypeOf - JavaScript Multi-level inheritance and isPrototypeOf 使用 Javascript 进行多级表单验证 - Multi-Level Form Validation Using Javascript jQuery创建多级无序列表 - jQuery create multi-level unordered list
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM