切换隐藏/显示jQuery问题

Question

已经有很多关于此主题的帖子，但是没有一篇直接解决我的问题。这是我当前的设置：

我有一个ID为#art的div；

和另一个div，其中包含我要显示的内容，其ID为#artresult。

我正在使用的jQuery是这样的：

$(".art").click(function() {
    $("#artresult").toggle(); });

应用于我的代码时：

<button type="button" a href="#" id="myTab" role="tablist"
    class=“art”
    class="btn btn-light font-weight-bold font-size-h6 px-3 py-3 m-2 pt-1 show">
    <span class="svg-icon svg-icon-primary svg-icon-2x"
        onclick="discovery_filters_form">
</span>Filters</a></button>

这是随附的jQuery：

jQuery(".art").click(function () {
    jQuery("#artresult").toggle();
});

以及要显示/隐藏的伴随表格：

<form class="form hidden" id="artresult">

我无法触发切换，也不确定原因。 我最初以为这可能是在jQuery中使用类而不是ID的结果。

所选按钮周围出现黑线边框，如此处所示。

是否可以从单个div中触发元素的显示/隐藏，如何使它起作用？

Answer 1

这是使用正确的HTML按钮标记的切换功能的示例。我认为您可能在这里遇到的问题是HTML标记不是有效的HTML。

jQuery(".art").click(function () {
    jQuery("#artresult").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button"><a href="#" id="myTab" role="tablist" class="art btn btn-light font-weight-bold font-size-h6 px-3 py-3 m-2 pt-1 show">
    <span class="svg-icon svg-icon-primary svg-icon-2x"
        onclick="discovery_filters_form">
</span>Filters</a></button>

<div id="artresult">
  <h1>
    TOGGLE ME PLEASE, YEAAAAAAAAAAAAA
  </h1>
</div>