Question

我试过这个链接解决方案，但无法得出结论..请帮助任何人。我是新手。但是一切都是徒劳的，我想要这样的事情 check this当我们在bootstap中单击面板内的链接时，如何关闭折叠面板

我的代码

            <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>

Answer 1

到链接或按钮提供

data-target = "#idofthepanel"

请参阅使用id而不是class

的面板

另外，您已经给出了data-target =“＃mynavbar”，但是navbar是一个类而不是id。

如何在bootstap中单击面板内的链接时关闭折叠面板

1 个答案: