JavaScript/jQuery 多级 Accordion 不会关闭复选框-6ren

JavaScript/jQuery 多级 Accordion 不会关闭复选框

转载作者：行者123 更新时间：2023-12-01 08:31:17

当我单击其中一个“主”复选框时，它会打开，但当我单击另一个“主”复选框时，它不会关闭前一个复选框。另外，如果我打开“主”复选框之一，然后单击其中的复选框，它不会展开该复选框，而是关闭“主”复选框，然后在不重新加载页面的情况下不会打开任何复选框，请参见示例 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);
});

最佳答案

将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>

<小时/>

使用jQuery通过复选框实现伪单选按钮。

$(".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>

关于JavaScript/jQuery 多级 Accordion 不会关闭复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60583871/

文章推荐： assembly - NASM程序集将输入转换为整数？

文章推荐： python - 如果存在其他标签，如何将键值对提取到字典中？

文章推荐： syntax-highlighting - D 的 Nano 语法高亮规则

文章推荐： python - 在 python 上查找 Windows 和 Linux 的默认网关地址

jquery - Accordion 中的 Accordion ；如何使可排序只拖动数据而不是 Accordion 本身
我有两个可以相互交换数据的列表。我的列表之一是 Accordion 列表，您可以在其中放置数据，但也包含更多特定的 Accordion ，这些 Accordion 也允许在其中放置数据。我可以在表之间
javascript - 动态显示 Accordion ，单击时第一个 Accordion 打开和关闭前一个 Accordion
我正在从数据库中获取记录，我必须在 Accordion 中显示这些记录。我能够显示记录。现在我正在做的是，我必须显示第一个打开的 Accordion ，然后在单击然后关闭上一个打开的 Accordio
jQuery Accordion - 当打开另一个 Accordion Pane 时如何折叠其他打开的 Accordion Pane
我有一个 Accordion ，我希望具有以下功能:当用户单击链接展开时，其他展开的链接(如果有)将折叠。我知道这个功能是内置在 Accordion 插件中的，但我试图避免添加另一个库(jQuery
javascript - 将 jQuery Accordion 元素从一个 Accordion 移动到另一个 Accordion
有点奇怪，这个。我有两个 jquery Accordion 实体，在点击一个 Accordion 中的一个项目时，我想将它动态添加到第二个 Accordion 中，并将其隐藏在原件中。目前从 A 移
javascript - 单击一个 Accordion 时，多个 Bootstrap Accordion 会折叠其他 Accordion
我尝试了以下代码，除了 FontAwesome 图标之外，一切都很好。我尝试在 Google 上寻找解决方案，但找不到我正在寻找的解决方案。当我单击其中一个 Accordion 时，另一个 Acco
jquery - Bootstrap Accordion ，单击时滚动到事件 Accordion 的顶部，我将如何在嵌套 Accordion 上实现？
我正在使用 Bootstrap 制作一个响应式网站，它包含带有大量文本的嵌套 Accordion ，当您读到底部并单击下一个 Accordion 时，大量文本被折叠，我留在了页面底部。我从 Boot
javascript - 嵌套 Accordion - 在 Accordion 内添加 anchor 链接和 Accordion
尝试创建嵌套 Accordion 时，是否可以使用 jquery 在另一个 Accordion 内部创建 anchor 链接和 Accordion ？例如，在我的代码中我有用于 Accordion
javascript - JQuery UI 嵌套 Accordion - 单击子 Accordion 关闭父 Accordion
我正在实现一个嵌套 Accordion ，但是当我点击父级 Accordion 中的子组件时，它关闭了父级。我希望它在点击 child 时保持打开状态。 HTML: Home
javascript - 如何在 Bootstrap 中为 Accordion 添加加号或减号？ Accordion 关闭时显示加号， Accordion 打开时显示减号
我试图在 bootstrap Accordion 中添加加号和减号，当显示内容的 div 打开时显示加号，关闭时显示减号，当我打开第二个选项卡时它应该关闭其他打开的选项卡的内容(这个当前正在发生)并且
accordion - Primeng Accordion 标题按钮
我有 Angular 5 应用程序，我正在使用 PrimeNG 组件。我创建了带有定义标题的 PrimeNG Accordion ，其中有标题和一些操作按钮，如下所示:
accordion - Bootstrap Accordion 未关闭
我有一个运行正常的Bootstrap 3.0 Accordion ，当您单击其中一个主链接时，该 Accordion 将打开。唯一的问题是，如果您单击第二个主链接，则第一个链接不会折叠-它们都保持打开
javascript - Accordion 中的 Accordion
我正在尝试将 Accordion 嵌入另一个 Accordion 中，但是它不起作用，嵌入式 Accordion 只会扩展到第一个扩展 Accordion 的大小，我需要添加额外的空间才能显示内容，任
javascript - Accordion 中的 Accordion
我正在尝试将 Accordion 放在 Accordion 中。但是第二个 Accordion 不能正常工作。第一个中的 Accordion 根本不起作用。任何帮助将不胜感激 :) 我的问题主要是代码
安卓 Accordion / Accordion /折叠动画
我正在尝试创建一个交互式 Accordion / Accordion /折叠动画，以便 View 在与交互时折叠/展开自身 - 以相同的方式 flipboard折叠 View ，但两侧都折叠我认为我
html - 2 Accordion A 和 B 需要 Accordion A 第一类也打开 Accordion B 第一类，反之亦然
您好，这是我的第一个问题，英语不是我的母语，如果我犯了一些错误，请见谅。我在我的项目中使用 Angular 6、jQuery 和 BS。我有两个 Accordion ，每个都有不同的类别。我们将它
javascript - 设置 Accordion 打开所有 Accordion
我正在构建一个非常简单的 Accordion ，我想设置 ti 在页面加载时打开所有容器。让它打开单个项目(或没有项目)是没有问题的，但我怎样才能让它打开页面加载时的所有项目。 HTML
javascript - Accordion 打开页面上的所有 Accordion ，再次单击时不会折叠。
我正在处理一个刚刚添加了 Accordion 的页面。它有几个不同的 Accordion ，当单击其中任何一个时，所有 Accordion 都会打开。再次单击 Accordion 时，它应该折叠，但它
accordion - Dojo/Dijit Accordion - 添加展开和折叠箭头
尝试弄清楚如何在 Dojo 的 Accordion dijit.layout.Accordion 容器上添加展开/折叠箭头图像，就像 dijitTitlePane / dojox.widget.Tit
javascript - 如何在打开另一个 Accordion 时自动关闭 Accordion ？
我有一个 Accordion ，其中包含一些嵌套的 Accordion ，我打算将其用于移动导航。我不是最擅长 JavaScript，所以我必须找到教程才能达到现在的水平。我现在需要的只是当其他 Ac
Javascript:单击一个 Accordion 时关闭所有 Accordion ？
我基本上试图关闭所有 Accordion ，只打开其中一个被单击的 Accordion 。因此，短期内只打开一个选项卡。这是我到目前为止所拥有的: https://jsfiddle.net/gym

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JavaScript/jQuery 多级 Accordion 不会关闭复选框