单击移动视图时隐藏导航(滚动一页)

时间:2018-03-14 07:35:03

标签: php jquery twitter-bootstrap

点击链接后如何隐藏导航栏?这是我的代码如下。我正在尝试stackoverflow中提供的一些代码,但它没有用。你能解决我的问题吗?



 <!-- Navigation -->
<div id="nav">
  <nav class="navbar navbar-custom">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button>
        	<a class="navbar-brand page-scroll" href="#page-top">
        	<div class="hover13">
				<figure><img src="img/Julius-Logo-header4.png" alt="" class="img-responsive"></figure>
			</div>
			</a>
        
      
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
        <ul class="nav navbar-nav">
          <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
          <li class="hidden"> <a href="#page-top"></a> </li>
          <li> <a class="page-scroll" href="#about">About</a> </li>
          
          <li> <a class="page-scroll hidden-xs hidden-sm" href="#offer">What we offer</a> </li>
          		<li> <a class="page-scroll hidden-lg hidden-md" href="#offer1">What we offer</a> </li>
          <li> <a class="page-scroll" href="#photos">Project</a> </li>
          
          <li> <a class="page-scroll  hidden-xs hidden-sm" href="#blogs">Blogs</a> </li>
          		<li> <a class="page-scroll hidden-lg hidden-md" href="#blogs1">Blogs</a> </li>
          
          <li> <a class="page-scroll" href="#event">Events</a> </li>
          <li> <a class="page-scroll" href="#contact">Contact</a> </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

使用jQuery:

$(document).ready(function() {
  $(".navbar-toggle").click(function() {
    $(".navbar-main-collapse").toggleClass('hiddenNav');
  });
});

在CSS中使用此类:

.hiddenNav {
  display: none;
  visibility: hidden;
}

答案 1 :(得分:0)

我已经阅读了您的问题,您想要在点击链接时隐藏导航栏。这在Jquery中非常简单。在jquery中使用.hide()内置函数。代码

import sqlite3, datetime
dbconn = sqlite3.connect(':memory:')
c = dbconn.cursor()
c.execute('create table mytable(title text, t timestamp)')

#1
c.execute('insert into mytable (title, t) values (?, ?)', ("hello2", datetime.datetime(2018,3,10,12,12,00)))

#2
c.execute('insert into mytable (title, t) values (?, ?)', ("hello", "Sat Mar 10 2018 12:12:00 GMT+0100 (Paris, Madrid)"))

c.execute("select * from mytable")
for a in c.fetchall(): 
    print a

# (u'hello', u'Sat Mar 10 2018 12:12:00 GMT+0100 (Paris, Madrid)')
# (u'hello2', u'2018-03-10 12:12:00')

我希望这会对您有所帮助