javascript - jQuery 显示隐藏多个 Div 不起作用

Question

我有这个 jQuery 代码用于在我的页面中显示/隐藏多个 div:

$(function() {
    $('#toggle').click(function(event) {
        event.preventDefault();
        var target = $(this).attr('href');
        $(target).toggleClass('hidden show');
    });
});

<span class="add-btn">
    <a href="#options" id="toggle">
        <span class="btn btn-primary btn-sm">
            <i class="fa fa-filter"></i>
            Filter
        </span>
    </a>
</span>
<div id="options" class="well hidden">hehe</div>    
<span class="add-btn">
    <a href="#options2" id="toggle">
        <span class="btn btn-primary btn-sm">
            <i class="fa fa-filter"></i>
            Filter2
        </span>
    </a>
</span>
<div id="options2" class="well hidden">hoho</div>

.show {
    display: block !important;
}
.hidden {
    display: none !important;
    visibility: hidden !important;
}

但在 Action 中不起作用!如何解决这个问题？!

Demo

Answer 1

您需要让您的id 触发器具有唯一标识符，它们不能相同。该代码将仅评估第一个实例并忽略任何其他实例。

$(function() {

       $('#toggle1, #toggle2').click(function(event) {
         event.preventDefault();
         var target = $(this).attr('href');
         $(target).toggleClass('hidden show');
       });
});

示例:

 $(function() {

       $('#toggle1, #toggle2').click(function(event) {
         event.preventDefault();
         var target = $(this).attr('href');
         $(target).toggleClass('hidden show');
       });
});

.show {
    display: block !important;
}
.hidden {
    display: none !important;
    visibility: hidden !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="add-btn"><a href="#options" id="toggle1">
              <span class="btn btn-primary btn-sm"><i class="fa fa-filter"></i>Filter</span></a>
</span>



<div id="options" class="well hidden">hehe</div>

<span class="add-btn"><a href="#options2" id="toggle2">
              <span class="btn btn-primary btn-sm"><i class="fa fa-filter"></i>Filter2</span></a>
</span>



<div id="options2" class="well hidden">hoho</div>