【问题标题】:bootstrap toggle button is not collapsing引导切换按钮未折叠
【发布时间】:2014-04-11 11:36:28
【问题描述】:

我正在做一个响应式网站。 我首先在 localhost 中尝试过,主题运行良好。我的意思是引导切换按钮工作正常。现在我开始生动地启动主题,并且我还对小部件的排列进行了一些更改。现在切换按钮不起作用。点击时没有任何东西掉落。我尝试了很多次,但无法弄清楚是什么问题。这是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>

函数.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>

【问题讨论】:

  • 请提供小提琴或一些代码,而不是发布指向您网站的链接:meta.stackexchange.com/questions/125997/…
  • 你说的切换不工作是什么意思?
  • @jack:我的意思是在移动视图时切换按钮来了,但是当我点击它时没有任何反应。通常当我们单击引导切换按钮时,菜单列表会折叠 ryt。?在这里什么都没有发生。
  • 您缺少 boostrap.js 文件。
  • @jack: 我可以在functions.php中包含这样的“wp_register_script('jquery.bootstrap', get_template_directory_uri() . '/js/bootstrap.js', 'jquery');”

标签: jquery html css wordpress twitter-bootstrap


【解决方案1】:

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

请在 head 块中添加以下代码

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

【讨论】:

  • 我已经包含了那些 thrgh functions.php 先生。请找到我更新的帖子。
  • @user3493407 但您生成的页面没有该文件,因此请检查'
  • 是的,当我添加 jquery 时我得到了……哎呀,我真是个白痴……没注意到……非常感谢 sridhar .. :)
  • @user3493407 很高兴为您提供帮助 :-)
【解决方案2】:

您缺少 boostrap.js 文件。

【讨论】:

    【解决方案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>

    【讨论】:

    • 我已经包含了那些 thrgh functions.php 先生。请找到我更新的帖子。
    猜你喜欢
    • 2018-04-02
    • 1970-01-01
    • 2013-04-25
    • 2015-01-21
    • 2013-10-03
    • 2014-08-03
    • 1970-01-01
    • 2021-12-09
    • 1970-01-01
    相关资源
    最近更新 更多