Question

我正在做一个响应式网站。 我首先在localhost中尝试过，主题工作正常。我的意思是bootstrap切换按钮工作正常。现在我开始主题生动，我也对小部件的安排做了一些改变。现在切换按钮无法正常工作。点击时没有任何下降。我尝试了很多次，但无法弄清楚是什么问题。这是link。请帮助我解决这个问题。

我的标题部分代码，其中包含菜单。

<head>

 <title><?php wp_title( '|', true, 'right' ); ?></title>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
  <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/assets/ico/favicon.ico">

 <!-- Bootstrap core CSS -->
 <link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet">

 <!-- Custom styles for this template -->
  <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css"> <!--file inside the css folder-->

  <!-- Just for debugging purposes. Don't actually copy this line! -->
  <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
  <?php //wp_head(); ?> 
  </head>
<body>           

        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="border-bottom:1px solid #3379b4!important;">
<div  class="Top">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="ContactDtls"><?php get_sidebar('contact'); ?></div>
      <div class="socialIcons"><?php get_sidebar('snicons');?></div>
    </div>
  </div>
</div>
</div>
 <div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
  </button>
 <?php get_sidebar('logo'); ?></div>
<div class="navbar-collapse collapse">

 <?php get_sidebar('menu'); ?>

  </div>
<!--/.navbar-collapse --> 
 </div>

的functions.php

  function wpt_register_js() {
   wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
   }add_action( 'init', 'wpt_register_js' );

  function wpt_register_css() {
  wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
   wp_enqueue_style( 'bootstrap.min' );
   }add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

解决我从header.php中跳过了这个链接

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>

Answer 1

您缺少bootstrap.js文件。

Answer 2

你错过了加载jquery库和bootstrap js文件

请在头部块中添加以下代码

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>

Answer 3

可能是你的HTML中没有包含javascript

请查看：http://getbootstrap.com/getting-started/

在HTML中添加

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

bootstrap切换按钮没有折叠

3 个答案: