如何在单击另一个按钮时更改多个下拉列表的下拉按钮

debugcn 发表于 Dev

山德鲁

我找不到任何帮助，但也许有人有想法，拜托。

假设我有两个下拉菜单 A 和 B，每个下拉菜单都有两个按钮。单击按钮 A 时，A 的下拉内容会淡出，按钮从非活动状态变为活动状态。再次单击 A，内容淡入并且按钮从活动状态变为非活动状态。当然B也一样。

现在; 单击 A 时，A 的内容淡出，按钮处于活动状态。然后单击 B，B 的内容淡出，B 的按钮处于活动状态。A 的内容淡入（自动）但是！A 的按钮仍处于活动状态：/

即使单击了另一个下拉列表的另一个按钮，我也希望这些按钮切换回非活动状态。如果您单击同一个按钮，到目前为止它工作正常，但如果您单击另一个按钮，它们会保持活动状态。

请参阅下面我的代码。

任何帮助将不胜感激。提前致谢：）

$('.panel .panel-heading').children('a.btn.btn-secondary').addClass('button_right collapsed');

$(document).ready(function(e){
    $('.btn.button_right').click(function(){
        var btn = $(this);
        var panel = $('.panel .panel-collapse');

        btn.removeClass('button_down button_right');

        // 
        if(btn.hasClass('collapsed')) {
            btn.addClass('button_down');
        } else {
            btn.addClass('button_right');
        }
    });
});

<div class="panel panel-default m-b">
  <div class="panel-heading">
    <a class="btn btn-secondary btn-block btn-default button_right collapsed" data-toggle="collapse" data-parent="#accordion-1344" href="#panel-1344-0" aria-expanded="false">

    </a>
  </div>
  <div id="panel-1344-0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
    <div class="panel-body">

      <div id="c1343" class="">


        <div class="ce-textpic ce-left ce-above">



          <div class="ce-bodytext">


            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
              no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
              justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
              erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

          </div>


        </div>


      </div>


    </div>
  </div>
</div>

山德鲁

同时，我为任何感兴趣的人找到了解决方案。无论如何，感谢所有调查我问题的人。

我通过这里的 bootstrap 给出的 JS 事件解决了它：https : //getbootstrap.com/docs/4.0/components/collapse/

$('.panel .panel-heading').children('a.btn.btn-secondary').addClass('button_right collapsed');

$('.panel.panel-default').on('hide.bs.collapse', function () {
var toggleButton = $(this).find('.panel-heading .btn');
toggleButton.toggleClass('button_right button_down');
});

$('.panel.panel-default').on('show.bs.collapse', function () {
var toggleButton = $(this).find('.panel-heading .btn');
toggleButton.toggleClass('button_right button_down');
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。