javascript - 第二 Accordion 面板不更新-6ren

javascript - 第二 Accordion 面板不更新

转载作者：行者123 更新时间：2023-11-28 15:44:20

在我制作的 Accordion 中，第一个面板是一个图标选择。选择其中一个图标后，它会根据选择的图标将第二个 Accordion 面板替换为三个面板之一。我认为我的问题在于 javascript 以及我如何设置它。我认为我的问题也可能出在类中的 div.panel 类中。

HTML

<button class="accordion">
                    <h2 class="float-left">1.</h2>
                    <h2 class="text-center">Screen Type</h2></button> 
                <div class="panel text-center" id="type_panel">
                    <label class="icon-select">
                        <input type="radio" name="type" id="laptop_button" /> <img src="icons/iconmonstr-laptop-4-120.png" alt="laptop"> </label>
                    <label class="icon-select">
                        <input type="radio" name="type" id="tablet_button" /> <img src="icons/iconmonstr-tablet-1-120.png" alt="tablet"> </label>
                    <label class="icon-select">
                        <input type="radio" name="type" id="phone_button" /> <img src="icons/iconmonstr-smartphone-3-120.png" alt="phone"> </label>
                </div>
                <form action="" id="tallyForm" onsubmit="return false;">
                    <button class="accordion">
                        <h2 class="float-left">2.</h2>
                        <h2 class="text-center">Model</h2></button>
                    <div class="panel" id="default_panel">
                        <label><h3 class="text-center">Please select a Device Type above</h3></label>
                    </div>
                    <div class="panel invisible" id="laptop_panel">
                        <div id="col1">
                            <label class="control control--radio">LAPTOP
                                <input type="radio" name="radio-model" value="laptop1" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col3">
                            <label class="control control--radio">LAPTOP2
                                <input type="radio" name="radio-model" value="laptop2" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col2">
                            <label class="control control--radio">LAPTOP3
                                <input type="radio" name="radio-model" value="laptop3" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                    </div>
                    <div class="panel invisible" id="tablet_panel">
                        <div id="col1">
                            <label class="control control--radio">iPad 2
                                <input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad 3
                                <input type="radio" name="radio-model" value="tablet-ipad3" onclick="calculateTotal()" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad 4
                                <input type="radio" name="radio-model" value="tablet-ipad4" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad Air
                                <input type="radio" name="radio-model" value="tablet-ipadAir" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad Mini
                                <input type="radio" name="radio-model" value="tablet-ipadMini" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad Mini 2
                                <input type="radio" name="radio-model" value="tablet-ipadMini2" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col3">
                            <label class="control control--radio">Nexus 7
                                <input type="radio" name="radio-model" value="tablet-nexus7" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col2">
                            <label class="control control--radio">Amazon Fire
                                <input type="radio" name="radio-model" value="tablet-amazonFire" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">Amazon Kindle
                                <input type="radio" name="radio-model" value="tablet-amazonFire" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                    </div>
                    <div class="panel invisible" id="phone_panel">
                        <div id="col1">
                            <label class="control control--radio">iPhone 3 &amp; 4
                                <input type="radio" name="radio-model" value="phone-iphone3" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPhone 5, 5c, 5s
                                <input type="radio" name="radio-model" value="phone-iphone5cs" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPhone 6
                                <input type="radio" name="radio-model" value="phone-iphone6" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPhone 6 Plus
                                <input type="radio" name="radio-model" value="phone-iphone6+" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col3">
                            <label class="control control--radio">Microsoft Lumia 430
                                <input type="radio" name="radio-model" value="phone-lumia430" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col2">
                            <label class="control control--radio">Galaxy S3
                                <input type="radio" name="radio-model" value="phone-galaxys3" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">Galaxy S4
                                <input type="radio" name="radio-model" value="phone-galaxys4" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                    </div>

CSS

.icon-select {
    margin-right: 20px;
    margin-left: 20px;
}

#col1 {
    float: left;
    width: 33%;
    height: 100%;
}

#col2 {
    float: center;
    height: 100%;
    width: 33%;
    overflow: hidden;
    display: table-cell;
}

#col3 {
    float: right;
    height: 100%;
    width: 34%;
    margin-left: 20px;
    overflow: hidden;
    display: table-cell;
}

button.accordion {
    background-color: #ffffff;
    color: #444;
    cursor: pointer;
    padding: 2px;
    width: 50%;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-left: 1px solid #6fdd7a;
    border-right: 1px solid #6fdd7a;
    border-top: 1px solid #6fdd7a;
    border-radius: 4px;
    border-bottom: none;
}

button.accordion.active,
button.accordion:hover {
    background-color: #6fdd7a;
    color: #ffffff;
}

div.panel {
    padding: 0px 18px;
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    width: 46%;
    border-right: 1px dotted #6fdd7a;
    border-left: 1px dotted #6fdd7a;
    transition: max-height 0.2s ease-out;
}

#optional_panel {
    border-bottom: 1px solid #6fdd7a;
}

label > input {
    visibility: hidden;
    position: absolute;
}

label > input + img {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 2px;
    -webkit-transition: all 0.25s linear;
}

label > input:checked + img {
    background-color: #6fdd7a;
}

.invisible {
    display: none;
}

.showing {
    padding: 0px 18px;
    background-color: #ffffff;
    max-height: 600px;
    overflow: hidden;
    width: 46%;
    border-right: 1px dotted #6fdd7a;
    border-left: 1px dotted #6fdd7a;
    transition: max-height 0.2s ease-out;
}
// JUST STYLES THE RADIO BUTTONS AND 
.control {
    font-size: 18px;
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-left: 30px;
    cursor: pointer;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #444;
}

.control input:checked ~ .control__indicator {
    background: #6fdd7a;
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #6fdd7a;
}

.control__indicator:after {
    position: absolute;
    display: none;
    content: '';
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    top: 4px;
    left: 8px;
    width: 3px;
    height: 8px;
    transform: rotate(45deg);
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function () {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
        }
        else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    };
}
$("#laptop_button").click(function () {
    $('#default_panel').addClass('invisible');
    $('#laptop_panel').removeClass('invisible');
    $('#laptop_panel').addClass('showing');
    $('#tablet_panel').addClass('invisible');
    $('#phone_panel').addClass('invisible');
});
$("#tablet_button").click(function () {
    $('#default_panel').addClass('invisible');
    $("#tablet_panel").removeClass('invisible');
    $('#tablet_panel').addClass('showing');
    $('#laptop_panel').addClass('invisible');
    $('#phone_panel').addClass('invisible');
});
$("#phone_button").click(function () {
    $('#default_panel').addClass('invisible');
    $("#phone_panel").removeClass('invisible');
    $('#phone_panel').addClass('showing');
    $('#laptop_panel').addClass('invisible');
    $('#tablet_panel').addClass('invisible');
});

JSFIDDLE

https://jsfiddle.net/jutmfuzc/

最佳答案

你需要在 .showing 上设置 max-height 因为 div.panel 有 max-height: 0

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  };
}
$("#laptop_button").click(function() {
  $('#default_panel').addClass('invisible');
  $('#laptop_panel').removeClass('invisible');
  $('#laptop_panel').addClass('showing');
  $('#tablet_panel').addClass('invisible');
  $('#phone_panel').addClass('invisible');
});
$("#tablet_button").click(function() {
  $('#default_panel').addClass('invisible');
  $("#tablet_panel").removeClass('invisible');
  $('#tablet_panel').addClass('showing');
  $('#laptop_panel').addClass('invisible');
  $('#phone_panel').addClass('invisible');
});
$("#phone_button").click(function() {
  $('#default_panel').addClass('invisible');
  $("#phone_panel").removeClass('invisible');
  $('#phone_panel').addClass('showing');
  $('#laptop_panel').addClass('invisible');
  $('#tablet_panel').addClass('invisible');
});

.icon-select {
  margin-right: 20px;
  margin-left: 20px;
}

#col1 {
  float: left;
  width: 33%;
  height: 100%;
}

#col2 {
  float: center;
  height: 100%;
  width: 33%;
  overflow: hidden;
  display: table-cell;
}

#col3 {
  float: right;
  height: 100%;
  width: 34%;
  margin-left: 20px;
  overflow: hidden;
  display: table-cell;
}

button.accordion {
  background-color: #ffffff;
  color: #444;
  cursor: pointer;
  padding: 2px;
  width: 50%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  border-left: 1px solid #6fdd7a;
  border-right: 1px solid #6fdd7a;
  border-top: 1px solid #6fdd7a;
  border-radius: 4px;
  border-bottom: none;
}

button.accordion.active,
button.accordion:hover {
  background-color: #6fdd7a;
  color: #ffffff;
}

div.panel {
  padding: 0px 18px;
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  width: 46%;
  border-right: 1px dotted #6fdd7a;
  border-left: 1px dotted #6fdd7a;
  transition: max-height 0.2s ease-out;
}

#optional_panel {
  border-bottom: 1px solid #6fdd7a;
}

label > input {
  visibility: hidden;
  position: absolute;
}

label > input + img {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  -webkit-transition: all 0.25s linear;
}

label > input:checked + img {
  background-color: #6fdd7a;
}

.invisible {
  display: none;
}

div.showing {
  padding: 0px 18px;
  background-color: #ffffff;
  max-height: 600px;
  overflow: hidden;
  width: 46%;
  max-height: 100%;
  border-right: 1px dotted #6fdd7a;
  border-left: 1px dotted #6fdd7a;
  transition: max-height 0.2s ease-out;
}

// JUST STYLES THE RADIO BUTTONS AND 
.control {
  font-size: 18px;
  position: relative;
  display: block;
  margin-bottom: 15px;
  padding-left: 30px;
  cursor: pointer;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background: #e6e6e6;
}

.control--radio .control__indicator {
  border-radius: 50%;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #444;
}

.control input:checked ~ .control__indicator {
  background: #6fdd7a;
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #6fdd7a;
}

.control__indicator:after {
  position: absolute;
  display: none;
  content: '';
}

.control input:checked ~ .control__indicator:after {
  display: block;
}

.control--checkbox .control__indicator:after {
  top: 4px;
  left: 8px;
  width: 3px;
  height: 8px;
  transform: rotate(45deg);
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
  top: 7px;
  left: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">
  <h2 class="float-left">1.</h2>
  <h2 class="text-center">Screen Type</h2></button>
<div class="panel text-center" id="type_panel">
  <label class="icon-select">
    <input type="radio" name="type" id="laptop_button" /> <img src="icons/iconmonstr-laptop-4-120.png" alt="laptop"> </label>
  <label class="icon-select">
    <input type="radio" name="type" id="tablet_button" /> <img src="icons/iconmonstr-tablet-1-120.png" alt="tablet"> </label>
  <label class="icon-select">
    <input type="radio" name="type" id="phone_button" /> <img src="icons/iconmonstr-smartphone-3-120.png" alt="phone"> </label>
</div>
<form action="" id="tallyForm" onsubmit="return false;">
  <button class="accordion">
    <h2 class="float-left">2.</h2>
    <h2 class="text-center">Model</h2></button>
  <div class="panel" id="default_panel">
    <label>
      <h3 class="text-center">Please select a Device Type above</h3></label>
  </div>
  <div class="panel invisible" id="laptop_panel">
    <div id="col1">
      <label class="control control--radio">LAPTOP
        <input type="radio" name="radio-model" value="laptop1" />
        <div class="control__indicator"></div>
      </label>
    </div>
    <div id="col3">
      <label class="control control--radio">LAPTOP2
        <input type="radio" name="radio-model" value="laptop2" />
        <div class="control__indicator"></div>
      </label>
    </div>
    <div id="col2">
      <label class="control control--radio">LAPTOP3
        <input type="radio" name="radio-model" value="laptop3" />
        <div class="control__indicator"></div>
      </label>
    </div>
  </div>
  <div class="panel invisible" id="tablet_panel">
    <div id="col1">
      <label class="control control--radio">iPad 2
        <input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPad 3
        <input type="radio" name="radio-model" value="tablet-ipad3" onclick="calculateTotal()" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPad 4
        <input type="radio" name="radio-model" value="tablet-ipad4" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPad Air
        <input type="radio" name="radio-model" value="tablet-ipadAir" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPad Mini
        <input type="radio" name="radio-model" value="tablet-ipadMini" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPad Mini 2
        <input type="radio" name="radio-model" value="tablet-ipadMini2" />
        <div class="control__indicator"></div>
      </label>
    </div>
    <div id="col3">
      <label class="control control--radio">Nexus 7
        <input type="radio" name="radio-model" value="tablet-nexus7" />
        <div class="control__indicator"></div>
      </label>
    </div>
    <div id="col2">
      <label class="control control--radio">Amazon Fire
        <input type="radio" name="radio-model" value="tablet-amazonFire" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">Amazon Kindle
        <input type="radio" name="radio-model" value="tablet-amazonFire" />
        <div class="control__indicator"></div>
      </label>
    </div>
  </div>
  <div class="panel invisible" id="phone_panel">
    <div id="col1">
      <label class="control control--radio">iPhone 3 &amp; 4
        <input type="radio" name="radio-model" value="phone-iphone3" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPhone 5, 5c, 5s
        <input type="radio" name="radio-model" value="phone-iphone5cs" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPhone 6
        <input type="radio" name="radio-model" value="phone-iphone6" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">iPhone 6 Plus
        <input type="radio" name="radio-model" value="phone-iphone6+" />
        <div class="control__indicator"></div>
      </label>
    </div>
    <div id="col3">
      <label class="control control--radio">Microsoft Lumia 430
        <input type="radio" name="radio-model" value="phone-lumia430" />
        <div class="control__indicator"></div>
      </label>
    </div>
    <div id="col2">
      <label class="control control--radio">Galaxy S3
        <input type="radio" name="radio-model" value="phone-galaxys3" />
        <div class="control__indicator"></div>
      </label>
      <label class="control control--radio">Galaxy S4
        <input type="radio" name="radio-model" value="phone-galaxys4" />
        <div class="control__indicator"></div>
      </label>
    </div>
  </div>

关于javascript - 第二 Accordion 面板不更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43058877/

文章推荐： javascript - 没有setTimeout的CSS连续旋转

文章推荐： css - 导航下拉 z-index/定位问题

文章推荐： ios - ios 上的 SqlClient 在函数中的所有其他代码之后执行

文章推荐： Javascript语句满足所有条件可能会出错

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 - 第二 Accordion 面板不更新