堆栈内存溢出
  简体   繁体   English

Bootstrap javascript wordpress 问题 data-toggle="collapse"

[英]Bootstrap javascript wordpress issue data-toggle="collapse"

 原文  2014-12-20 00:37:10  9   1    javascript/ jquery/ css/ wordpress/ twitter-bootstrap

问题描述

I'm having an issue with a project.我有一个项目的问题。

This is the first wordpress blog I do, the idea was the html site www.humantools.com.mx and build a blog for it www.humantools.com.mx/blog I have a weird problem, when loged the class="navbar-toggle collapsed" data-toggle="collapse" in the navbar works well, in the site it works well...这是我做的第一个 wordpress 博客，想法是 html 网站www.humantools.com.mx并为它建立一个博客www.humantools.com.mx/blog我有一个奇怪的问题，当登录 class="navbar -toggle collapsed" data-toggle="collapse" 在导航栏中运行良好，在站点中运行良好......

when I log out, the nav item that normally brings the colapssed menu links to "#"当我注销时，通常将折叠菜单链接到“#”的导航项

this is odd, I'm really hitting my head with this, please help, I'm adding the css and the header code, if you need anything else please let me know.这很奇怪，我真的很头疼，请帮忙，我正在添加 css 和标题代码，如果您需要其他任何内容，请告诉我。

HEADER标题

<?php
          
  /**
  
  * The Header template for our theme
  
  *
  
  * Displays all of the <head> section and everything up till <div id="main">
  
  *
  
  * @package WordPress
  
  * @subpackage Twenty_Thirteen
  
  * @since Twenty Thirteen 1.0
  
  */
  
  ?>
  
  <!--[if IE 7]>
  
  <html class="ie ie7" <?php language_attributes(); ?>>
  
  <![endif]-->
  
  <!--[if IE 8]>
  
  <html class="ie ie8" <?php language_attributes(); ?>>
  
  <![endif]-->
  
  <!--[if !(IE 7) & !(IE 8)]><!-->
  
  <html <?php language_attributes(); ?>>
  
  <!--<![endif]-->
  
  <head>
  
  <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="icon" href="http://www.humantools.com.mx/img/favicon.png">
  
  
  
  <title>Human Tools</title>
  
  
  <!-- Bootstrap core JavaScript
  
  ================================================== -->
  
  <!-- Placed at the end of the document so the pages load faster -->
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
  <script src="http://www.humantools.com.mx/dist/js/bootstrap.min.js"></script>
  
  <script src="http://www.humantools.com.mx/assets/js/docs.min.js"></script>
  
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  
  <script src="http://www.humantools.com.mx/assets/js/ie10-viewport-bug-workaround.js"></script>
  <script>
  
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'UA-56728201-1', 'auto');
  
  ga('send', 'pageview');
  
  </script>
  
  
  
  <!-- Bootstrap core CSS -->
  
  <link href="http://www.humantools.com.mx/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Custo Fonts -->
  
  <link href='http://fonts.googleapis.com/css?family=Titillium+Web:200,400,300,700,600' rel='stylesheet' type='text/css'>
  
  <!-- Custom styles for this template -->
  
  <link href="http://www.humantools.com.mx/style.css" rel="stylesheet">
  
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  
  <!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  
  <![endif]-->
  
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  
  <meta name="viewport" content="width=device-width">
  
  <title><?php wp_title( '|', true, 'right' ); ?></title>
  
  <link rel="profile" href="http://gmpg.org/xfn/11">
  
  <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
  
  <!--[if lt IE 9]>
  
  <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
  
  <![endif]-->
  
  <?php wp_head(); ?>
  
  </head>
  
  <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
  
  <!-- NAVBAR
  
  ================================================== -->
  
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  
  <div class="container">
  
  <div class="navbar-header">
  
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  
      <span class="sr-only">Menú</span>
  
      <span class="icon-bar"></span>
  
      <span class="icon-bar"></span>
  
      <span class="icon-bar"></span>
  
    </button>
  
    <a class="navbar-brand" href="http://www.humantools.com.mx/"><img src="http://www.humantools.com.mx/img/logo-humantools.png"></a>
  
  </div>
  
  <div id="navbar" class="navbar-collapse collapse">
  
    <ul class="nav navbar-nav navbar-right">
  
      <li><a href="http://www.humantools.com.mx/quienessomos.html">Quiénes<br>Somos</a></li>
  
      <li><a href="#" data-toggle="dropdown">Soluciones<br>para Empresas <span class="caret"></span></a>
  
        <ul class="dropdown-menu" role="menu">
  
          <li><a href="http://www.humantools.com.mx/outsourcing.html">Outsourcing <br>de Nómina</a></li>
  
          <li class="divider"></li>
  
          <li><a href="http://www.humantools.com.mx/procesamiento.html">Procesamiento <br>de Nómina</a></li>
  
        </ul>
  
      </li>
  
      <li><a href="http://www.humantools.com.mx/contacto.html">Info &<br>Contacto</a></li>
  
      <li><a href="http://www.humantools.com.mx/faq.html">Preguntas<br>Frecuentes</a></li>
  
      <li><a href="http://www.humantools.com.mx/avisodeprivacidad.html">Aviso de<br>Privacidad</a></li>
  
                  <li><a href="http://www.humantools.com.mx/blog">Blog<br><br></a></li>
  
  
  
    </ul>
  
  </div><!--/.nav-collapse -->
  
  </div>
  
  </nav>
  
  
  
  <!-- CONTENIDO
  
  ================================================== -->
  
  
  
  <div class="container">
  
  <div class="col-lg-9"> <!-- titulo blog -->

CSS CSS

/*
Theme Name:HumanTools.
Theme URI: www.humantools.com.mx
Description: Human Tools blog.
Version: 1.0
Author: Raul Salazar 
Author URI: www.bybrave.com
*/
body {
  padding-top: 70px;
  padding-bottom: 0px;
  font-family: 'Titillium Web', sans-serif;
}

.home {
    margin-bottom: 50px;
}

.interior {
    margin-bottom: 50px;
}

h1 {
  font-family: 'Titillium Web', sans-serif;
  text-align: left;
  text-decoration: none;
  font-size: 55px;
  font-weight: 200;
}

h2 {
  font-family: 'Titillium Web', sans-serif;
  color: #0876bb;
  text-align: left;
  text-decoration: none;
  font-size: 24px;
  font-weight: 400;
}

h3 {
    font-size: 40px;
    margin: 15% 0% 9% 0%;
}

h4 {
    font-size: 26px;
    margin-top: -5px;
}

.img-responsive {
    width: 100%;
}

.faq-divider {
    color: #adadad;
    margin-top: 30px;
    margin-bottom: 0px;
}

NAV STARTS资产净值开始

         .navbar {
          min-height: 78px;
}

.navbar-inverse {
    background-color: #212121;
}

.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 120%;
}

.nav>li {
    margin-top: 15px;
    margin-bottom: 15px;
    border-left: solid 1px #0876bb;
    border-spacing: 10px;
    padding: 0 15px;
}

li {
    font-size: 12px;
}

.navbar-toggle {
    margin-top: 20px;
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,        .navbar-inverse .navbar-nav>.open>a:focus {
    background-color: #212121;
}

.dropdown-menu {
    background-color: #888;
    border-radius: 0px;
    box-shadow: none;
    min-width: 150px;
}

.dropdown-menu>li>a {
    color: #FFF;
}

.dropdown-menu>li>a:hover {
    color: #FFF;
    background-color: #0876bb;
    margin: 0 0 0 0;
}

.navbar-nav>li>.dropdown-menu {
    margin-top: 15px;
}

NAV ENDS资产净值结束

/* blog */
div .date {
margin: 40% 0px 0px 55%;
font-size: 18px;
}

.blog6 { max-height:100%;
max-width:100%;
}
.contenidoblog {
    text-align: justify;
    font-size:1.2em;
}
.tag {
font-size:16px;}
.bluetag {
    color: #0876bb;
font-size:16px;
}

.masblog { font-size:18px; text-transform:capitalize;
margin-bottom:30px;}

.sidebar {margin-top: 10%; }
/*end blog*/
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 440px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  text-align: left;
  text-shadow: none;
  top: 40px;
  left: 5%;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 440px;
  background-color: #0876bb;
  background-image: url(img/slide-01.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
.carousel-inner > .item > img {
  min-width: 1024px;
  height: 440px;
  vertical-align: middle;
}

.carousel-control {
    height: 510px;
}

/* CUSTOMIZE QUOTES
-------------------------------------------------- */
.quotes {
   margin-top: -10px;
}

hr {
    color: #adadad;
    margin-top: 40px;
    margin-bottom: 40px;
}

.quote {
    border: solid 1px #adadad;
    border-radius: 15px;
    margin-bottom: 50px;
    padding: 30px 30px;
}

#quote-img {
    position: absolute;
    top: 30px;
    left: 5px;
    width: 29px;
    height: 29px;
    background-image: url('img/quote-left.png');
    background-repeat: no-repeat;
}

#quote-img2 {
    position: absolute;
    top: 30px;
    right: 5px;
    width: 29px;
    height: 29px;
    background-image: url('img/quote-right.png');
    background-repeat: no-repeat;
}

#quote-img3 {
    position: absolute;
    bottom: 27px;
    left: 50px;
    width: 36px;
    height: 25px;
    background-image: url('img/quote-corner.png');
    background-repeat: no-repeat;
}

/* CUSTOMIZE INTERIORS
-------------------------------------------------- */

.blue {
    color: #0876bb;
}

.grey {
    color: #888888;
    margin-left: -15px;
    margin-bottom: 10px;
    margin-top: -20px;
}

.subheading {
    font-size: 18px;
    font-weight: 400;
    padding-top: 30px;
}

.contenido {
    text-align: justify;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 20px 0 20px 0;
}

ul li.bullet-01 {
    background-image: url(img/bullet-01.jpg);
    background-repeat: no-repeat;
    background-position: 0px 22px; 
    padding: 15px 0 15px 40px;
    font-size: 13px;
    text-align: justify;
}

ul li.bullet-02 {
    background-image: url(img/bullet-02.png);
    background-repeat: no-repeat;
    background-position: 10px 22px; 
    padding: 15px 0 15px 40px;
    font-size: 13px;
    text-align: justify;
}

ul li.bullet-a {
    background-image: url(img/bullet-a.png);
    background-repeat: no-repeat;
    background-position: 0px 14px; 
    padding: 15px 0 15px 40px;
    font-size: 13px;
    text-align: justify;
}

ul li.bullet-b {
    background-image: url(img/bullet-b.png);
    background-repeat: no-repeat;
    background-position: 0px 14px; 
    padding: 15px 0 15px 40px;
    font-size: 13px;
    text-align: justify;
}

ul li.bullet-c {
    background-image: url(img/bullet-c.png);
    background-repeat: no-repeat;
    background-position: 0px 14px; 
    padding: 15px 0 15px 40px;
    font-size: 13px;
    text-align: justify;
}

.img-responsive {
    margin-top: 30px;
}

/* CUSTOMIZE FORM
-------------------------------------------------- */

.form-control {
    background-color: #eaeaea;
    box-shadow: none;
    border-radius: 0px;
    height: 50px;
    border: none;
}
.btn {
    background-color: #0876bb;
    border-radius: 0px;
    border: none;
    margin-right: -15px;
    padding: 20px 30px;
}

/* CUSTOMIZE FOOTER
-------------------------------------------------- */

.footer {
  position: relative;
  bottom: -31;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 75px;
  background-color: #212121;
}

.f1 {
    font-size: 11px;
    padding: 30px 0 20px 25px;
    color: #fff;
    font-weight: 200;
    letter-spacing: .5px
}

.f1 a {
    color: #fff;
} 

.f1 em {
    color: #0876bb;
}

.text-mutted {
    font-size: 11px;
    color: #888;
        padding: 30px 0 20px 0px;
}


@media (max-width: 990px) {
    #quote-img3 {
        bottom: -23px;
    }

    .f1 {
    padding: 20px 0 0 0;
    width: 60%;
    }
}

@media (max-width: 700px) {

    .copyright {
        margin-top: 130px;
    }

    .f1 {
    padding: 20px 0 0 0;
    width: 100%;
    }
}

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
} 

#respond { 
background: #ffffff;
padding:10px;
margin-top:-15%;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 30px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
 
#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

#author { 
font-family: Lobster, "Lobster 1.4", "Droid Sans", Arial;
font-size: 16px;
color:#1d1d1d; 
letter-spacing:.1em;
} 

#url  { 
color: #21759b;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
} 

#submit {
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
border:0px;
border-top: 2px solid #0992e6;
background: #0773b5;
} 

#submit:hover {
  background: #0869a4;
    border-top: 0px;
  border-bottom: 2px solid #0992e6;
text-shadow: 0px;
color:#cecece;
}

#commentform > p.logged-in-as {margin-bottom: 20px;}

1 个解决方案

解决方案1
 4  2014-12-20 00:55:53

These 3 files are returning a 404 .这 3 个文件返回404 。 You can see these buy opening up the JavaScript console in your browser.您可以看到这些购买在您的浏览器中打开JavaScript 控制台。

http://www.humantools.com.mx/prueba/dist/js/bootstrap.min.js http://www.humantools.com.mx/prueba/assets/js/docs.min.js http://www.humantools.com.mx/prueba/assets/js/ie10-viewport-bug-workaround.jshttp://www.humantools.com.mx/prueba/dist/js/bootstrap.min.js http://www.humantools.com.mx/prueba/assets/js/docs.min.js http:// www.humantools.com.mx/prueba/assets/js/ie10-viewport-bug-workaround.js

The most important file is bootstrap.min.js which needs to be included.最重要的文件是需要包含的bootstrap.min.js 。 You should include bootstrap in your project like this - make sure that you have it in the directory you say you have: https://github.com/pjhampton/BigBooty/blob/master/lib/framework/enqueue.php你应该像这样在你的项目中包含引导程序 - 确保你在你说你拥有的目录中拥有它： https ://github.com/pjhampton/BigBooty/blob/master/lib/framework/enqueue.php

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 数据切换引导程序折叠复选框问题 - data-toggle bootstrap collapse checkbox issue 引导数据切换折叠不起作用 - bootstrap data-toggle collapse not working 默认情况下，在Data-toggle =“ collapse”引导下打开导航 - Open Navigation by default under Data-toggle=“collapse” bootstrap 引导程序：取消嵌套按钮上的data-toggle =“ collapse” - Bootstrap: Cancel data-toggle=“collapse” on nested button Bootstrap折叠切换菜单问题与WordPress菜单 - Bootstrap collapse toggle menu issue with WordPress menu <a>通过 javascript 在标签内动态</a>设置引导数据切换 - Set bootstrap data-toggle inside <a> tag dynamically through javascript 数据切换崩溃无效 - data-toggle collapse doesn't work 禁用数据切换元素中链接的折叠 - Disable collapse for link in a data-toggle element 如何 select 父级进行数据切换崩溃？ - How to select parent for a data-toggle collapse? Bootstrap data-toggle =“ tab”在Javascript函数中调用 - Bootstrap data-toggle=“tab” calling in a Javascript function
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM