如何关闭折叠面板，当我们点击面板内的链接在引导

How to close collapse panel when we click link inside the panel in bootstrap

本文关键字：链接 我们 折叠 何关闭      更新时间：2023-09-26

我尝试了这个链接解决方案，但无法得出结论。我是新手，尝试了一切，但都是徒劳的，我想要这样做当我们在bootstrap

中单击面板内的链接时，查看如何关闭折叠面板我代码:

            <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <!--  ***** -->
                 <!--  <a href="#" class="btn btn-default" data-toggle="collapse" href="#collapse1">
                  <i class="material-icons" style="font-size:53px;">menu</i>
                  </a> -->
<!--                  ****** -->
<div class="navbar navbar-default navbar-static-" role="navigation">
  <div class="container">
      <button class="btn btn-default" data-toggle="collapse" data-target="#menu"><span class="material-icons" style="font-size:40px;">menu</span></button>
  </div>
</div>
</div>
<!-- Menu -->
<div id="menu" class="panel panel-default panel-collapse collapse bottom padding">
  <div class="container collapse navbar-collapse" id="myNavbar">
    <ul class="bottom padding list-inline">
       <li><a href="#about" class="panel-collapse">ABOUT US</a> / </li>
                        <li><a href="#services" >SERVICES</a> / </li> 
                        <li><a href="#portfolio">HOTELS</a> / </li>
                        <!--<li><a href="#pricing">PRICING</a></li>-->
                        <li><a href="#contact">CONTACT</a></li>
    </ul>
     <div class="container bottom padding">
  <div class="row">
    <div class="text-center">
      <p class="white">Some of our partner hotels</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="tile">
        <h3 class="title">Hilton Grosvenor House</h3>
        <p>The definition of luxury</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="tile">
        <h3 class="title">Marriott</h3>
        <p>Service paradise</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="tile">
        <h3 class="title">Ramada</h3>
        <p>For the business traveller</p>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="text-center padding padding">
            <img src="images/TTB_Logo_small.png"/>
            <h1>Tourists Travel Bureau UK Limited</h1>
            </div>
</div>

和javascript: 

  <script type="text/javascript">
            $(document).ready(function () {
                $(document).click(function (event) {
                    var clickover = $(event.target);
                    var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
                    if (_opened === true && !clickover.hasClass("navbar-toggle")) {
                        $("button.navbar-toggle").click();
                    }
                });
            });</script>

给链接或按钮

data-target = "#idofthepanel"

使用id代替class

来引用面板

,你已经给了data-target="#mynavbar"，但navbar是一个类，而不是一个id。

相关文章：