选择后折叠垂直菜单

Collapse the vertical menu after selection has been made

提问人:DCJones 提问时间:9/15/2023 最后编辑:DCJones 更新时间:9/15/2023 访问量:32

问:

我有一个可折叠的垂直菜单,我希望它在做出选择后做什么,折叠垂直菜单。

有人看到怎么了吗?

$('.RoomID').click(function() {
  console.log("MENU CLICKED 1");
  $("#collapseFour").collapse('hide');
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="panel panel-default">
    <div class="vertical-menu" id="headingRooms"><a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-plus"> </span> Rooms</a></div>
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        <div class="RoomListS">
          <div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Aston Suite" id="RoomID=6"> Aston Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Baskerville Suite" id="RoomID=3"> Baskerville Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Bolton Suite" id="RoomID=1"> Bolton Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Breakout Area 1" id="RoomID=13"> Breakout Area 1</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Breakout Area 2" id="RoomID=14"> Breakout Area 2</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Breakout Area 3" id="RoomID=15"> Breakout Area 3</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Brindley Suite" id="RoomID=4"> Brindley Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Cadbury Suite" id="RoomID=5"> Cadbury Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Chamberlain Suite" id="RoomID=8"> Chamberlain Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Edstone" id="RoomID=22"> Edstone</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Henley Suite" id="RoomID=16"> Henley Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Lowsonford" id="RoomID=20"> Lowsonford</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Loxley" id="RoomID=21"> Loxley</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Mason" id="RoomID=12"> Mason</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Ridgway Suite" id="RoomID=7"> Ridgway Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Rogers Suite" id="RoomID=9"> Rogers Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Shewley" id="RoomID=23"> Shewley</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Stratford" id="RoomID=19"> Stratford</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Warwick Suite" id="RoomID=17"> Warwick Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Watt  Suite" id="RoomID=2"> Watt  Suite</div>
            </div>
                            <div class="room-list-background">
              <div class="RoomID" data-toggle="modal" data-backdrop="false" data-keyboard="false"  data-name="Withering" id="RoomID=11"> Withering</div>
            </div>
                          </div>
        </div>
      </div>
    </div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

HTML jquery 引导 推特 引导-3

评论

0赞 scrhartley 9/15/2023
您使用的是哪个版本的 Bootstrap?看起来这个 API 适用于 4,不适用于 Bootstrap 5。
0赞 DCJones 9/15/2023
@scrhartley我忘了说它是 Bootstrap 3。
2赞 isherwood 9/15/2023
请标记您的 Bootstrap 版本,以及 HTML 和 JavaScript。不要在这里告诉我们。另外,请显示呈现的 HTML 片段,而不是 PHP 代码。根据需要更新上面的演示。
0赞 scrhartley 9/15/2023
单击某个项目,菜单将折叠。我不明白什么不起作用。
0赞 DCJones 9/15/2023
嗨,我同意,代码片段确实有效。一定是代码中的其他内容导致了问题。我需要再看一眼。

答: 暂无答案