使用 jQuery 单击链接时打开和关闭手风琴

Question

我正在尝试通过链接打开和关闭手风琴。我正在使用 jQuery。

您可以在这里看到小提琴 - https://jsfiddle.net/squidraj/x1epjfv7/11/

如果我只需单击面板，手风琴就可以很好地工作。

重现问题的步骤：

1. 单击“阅读更多标题 1”链接 - 它将打开“标题 1”框
2. 单击“标题 1”框关闭面板 - 切换效果很好。
3. 现在重做步骤 1 - 效果很好
4. 重做步骤 2 - 面板未关闭，这就是问题所在。当我第二次单击面板时它就起作用了。

$("a.button").on("click", function(e) {
  e.preventDefault();

  $(".accordion-wrapper div:nth-child(1) article").attr('style', 'max-height:inherit;');
  $(".accordion-wrapper input[id=1]").attr('checked', true);
});

//Closing the accordion

$(".accordion-wrapper label").on("click", function(e){
        const next = $(this).next()[0];
        if (next.style.maxHeight) {
            next.style.maxHeight = "";
        }
 });  

div input {
  display: none;
}
.accordion-wrapper{
  margin: 2rem 0;
  div{
    margin: 1rem 0;
  }
}
.accordion-wrapper article{
 background: rgba(255, 255, 255, 0.25);
 overflow: hidden;
 max-height: 0px;
 position: relative;
 transition: max-height 0.3s ease-in-out;
 border: 1px solid #eee;
 padding: 0 15px;
}

.accordion-wrapper label {
    position: relative;
    display: block;
    cursor: pointer;
    color: #777;
    font-size: 1.1em;
    background: #eeeeee;
    margin: 0;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-bottom: 1px solid transparent;
}

.accordion-wrapper input:checked ~ article{
  max-height: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="1" class="button">Read more title 1</a>

<div class="accordion-wrapper">
  <div>
    <input id="1" name="test" type="checkbox">
    <label for="1">Title 1</label>
    <article>
      <p>Content 1</p>
    </article>
  </div>
    <div>
    <input id="2" name="test" type="checkbox">
    <label for="2">Title 2</label>
    <article>
      <p>Content 2</p>
    </article>
  </div>
</div>

隐藏复选框的状态似乎仍未选中（错误），因此面板在第 4 步中不会关闭。

Answer 1

我已成功使用

.prop()

而不是

.attr()

解决了该问题。

这里有一个详细的解释为什么它不起作用

.attr()

.attr()

• .attr()

  代表属性，用于获取或设置 HTML 元素的属性值。

• 它对 HTML 标记中定义的属性进行操作。

• 它适用于 src、href、title、alt、class 等属性。

• 当用于设置属性值时，它会直接修改 HTML 标记。

• 它适用于标准 HTML 属性和自定义属性。 示例：

  $("img").attr("src", "newimage.jpg");

.prop():

• .prop()

  代表属性，用于获取或设置 HTML 元素的属性值。
• 它对 DOM 元素的属性进行操作，而不是直接对 HTML 标记进行操作。
• 它适用于选中、禁用、选择、只读等属性。
• 当用于设置属性值时，它操作的是底层 DOM 属性，而不是 HTML 标记。
• 它通常与布尔属性或表示元素状态的属性一起使用。
• 示例：

  $("input[type='checkbox']").prop("checked", true);

$("a.button").on("click", function(e) {
  e.preventDefault();
  $(".accordion-wrapper div input[id=1]~article").attr('style', 'max-height:inherit;');
  $(`.accordion-wrapper input[id=${$(this).data('id')}]`).prop('checked', true);
});

//Closing the accordion

$(".accordion-wrapper label").on("click", function(e){
        const next = $(this).next()[0];
        if (next.style.maxHeight) {
            next.style.maxHeight = "";
        }
 });   

div input {
  display: none;
}
.accordion-wrapper{
  margin: 2rem 0;
  div{
    margin: 1rem 0;
  }
}
.accordion-wrapper article{
 background: rgba(255, 255, 255, 0.25);
 overflow: hidden;
 max-height: 0px;
 position: relative;
 transition: max-height 0.3s ease-in-out;
 border: 1px solid #eee;
 padding: 0 15px;
}

.accordion-wrapper label {
    position: relative;
    display: block;
    cursor: pointer;
    color: #777;
    font-size: 1.1em;
    background: #eeeeee;
    margin: 0;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-bottom: 1px solid transparent;
}

.accordion-wrapper input:checked ~ article{
  max-height: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a href="1" data-id="1" class="button">Read more title 1</a>

<div class="accordion-wrapper">
  <div>
    <input id="1" name="test" type="checkbox">
    <label for="1">Title 1</label>
    <article>
      <p>Content 1</p>
    </article>
  </div>
    <div>
    <input id="2" name="test" type="checkbox">
    <label for="2">Title 2</label>
    <article>
      <p>Content 2</p>
    </article>
  </div>
</div>