Fatal编程技术网

Javascript 打开后关闭开关

javascript jquery html css twitter-bootstrap

Javascript 打开后关闭开关,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,在学习Bootstrap时，我在网上找到了一个主题，在导航栏上工作时，我发现切换按钮在打开后不会切换回关闭状态。我已经做了相当多的搜索，但很难找到任何可以帮助我。。。附件是我正在处理的代码。非常感谢您的帮助 <!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-wi

在学习Bootstrap时，我在网上找到了一个主题，在导航栏上工作时，我发现切换按钮在打开后不会切换回关闭状态。我已经做了相当多的搜索，但很难找到任何可以帮助我。。。附件是我正在处理的代码。非常感谢您的帮助

<!doctype html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>CardSpoiler</title>
    <meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
    <meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
    <meta property="og:title" content="">

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link rel="prefetch" href="images/zoom.png">
  </head>
  <style>
    body {
      background: #232526;
      background: -webkit-linear-gradient(to right, #232526 , #414345);
      background: linear-gradient(to right, #232526 , #414345);
      margin: 0em;
      vertical-align: middle;
    }
    li { cursor: pointer; cursor: hand; }
    .navbar-toggle{
      background-color: #232526;
    }
  </style>
  <body>
    <div class="navbar navbar-fixed-top" data-activeslide="1">
      <div class="container">

        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>


        <div class="nav-collapse collapse navbar-responsive-collapse">
          <ul class="nav row">
            <li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
            <li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior" class="external nav"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
            <li data-slide="3" class="col-12 col-sm-1"><a id="druid" href="../../../CardSpoiler.html" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
            <li data-slide="4" class="col-12 col-sm-1"><a id="priest" href="../../../CardSpoiler.html" title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
            <li data-slide="5" class="col-12 col-sm-1"><a id="paladin" href="../../../CardSpoiler.html" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
            <li data-slide="6" class="col-12 col-sm-1"><a id="hunter" href="../../../CardSpoiler.html" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
            <li data-slide="1" class="col-12 col-sm-1"><a id="mage" href="../../../CardSpoiler.html" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
            <li data-slide="2" class="col-12 col-sm-1"><a id="shaman" href="../../../CardSpoiler.html" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
            <li data-slide="3" class="col-12 col-sm-1"><a id="warlock" href="../../../CardSpoiler.html" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
            <li data-slide="4" class="col-12 col-sm-1"><a id="rogue" href="../../../CardSpoiler.html" title="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
            <li data-slide="5" class="col-12 col-sm-1"><a id="minions" href="../../../CardSpoiler.html" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
            <li data-slide="6" class="col-12 col-sm-1"><a id="spells" href="../../../CardSpoiler.html" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
          </ul>
          <div class="row">
            <div class="col-sm-2 active-menu"></div>
          </div>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->
  </body>

  <!-- SCRIPTS -->
  <script src="js/html5shiv.js"></script>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
  <script src="js/script.js"></script>

  <!-- fancybox init -->
  <script>
    $(document).ready(function(e) {
      var lis = $('.nav > li');
      menu_focus( lis[0], 1 );

      $(".fancybox").fancybox({
        padding: 10,
        helpers: {
          overlay: {
            locked: false
          }
        }
      });

    });

    document.getElementById("home").onclick = function () {
      location.href = "../../../CardSpoiler.html";
    };
    document.getElementById("warrior").onclick = function () {
      location.href = "../../../CardSpoiler_Warrior.html";
    };
    document.getElementById("druid").onclick = function () {
      location.href = "../../../CardSpoiler_Druid.html";
    };
    document.getElementById("priest").onclick = function () {
      location.href = "../../../CardSpoiler_Priest.html";
    };
    document.getElementById("paladin").onclick = function () {
      location.href = "../../../CardSpoiler_Paladin.html";
    };
    document.getElementById("hunter").onclick = function () {
      location.href = "../../../CardSpoiler_Hunter.html";
    };
    document.getElementById("mage").onclick = function () {
      location.href = "../../../CardSpoiler_Mage.html";
    };
    document.getElementById("shaman").onclick = function () {
      location.href = "../../../CardSpoiler_Shaman.html";
    };
    document.getElementById("warlock").onclick = function () {
      location.href = "../../../CardSpoiler_Warlock.html";
    };
    document.getElementById("rogue").onclick = function () {
      location.href = "../../../CardSpoiler_Rogue.html";
    };
    document.getElementById("minions").onclick = function () {
      location.href = "../../../CardSpoiler_MSOG_Minions.html";
    };
    document.getElementById("spells").onclick = function () {
      location.href = "../../../CardSpoiler_MSOG_Spells.html";
    };
  </script>
</html>


汽车扰流板
身体{
背景:#232526；
背景：-webkit线性梯度（向右，#232526，#414345）；
背景：线性梯度（向右，#232526，#414345）；
边距：0em；
垂直对齐：中间对齐；
}
li{cursor:pointer；cursor:hand；}
.导航栏切换{
背景色：#232526；
}

    

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 


$（文档）.ready（函数（e）{
var lis=$（'.nav>li'）；
菜单焦点（lis[0]，1）；
$（“.fancybox”）.fancybox({
填充：10，
助手：{
覆盖：{
锁定：错误
}
}
});
});
document.getElementById（“home”）.onclick=function（）{
location.href=“../../../cardstiplier.html”；
};
document.getElementById（“warrior”）.onclick=function（）{
location.href=“../../../cardstiplier\u Warrior.html”；
};
document.getElementById（“druid”）.onclick=function（）{
location.href=“../../../cardstiplier\u Druid.html”；
};
document.getElementById（“prist”）.onclick=function（）{
location.href=“../../../cardstiplier\u price.html”；
};
document.getElementById（“paladin”）.onclick=function（）{
location.href=“../../../cardstiplier\u Paladin.html”；
};
document.getElementById（“hunter”）.onclick=function（）{
location.href=“../../../cardstiplier\u Hunter.html”；
};
document.getElementById（“mage”）.onclick=function（）{
location.href=“../../../cardstiplier\u Mage.html”；
};
document.getElementById（“萨满”）.onclick=function（）{
location.href=“../../../cardstiplier\u Shaman.html”；
};
document.getElementById（“术士”）.onclick=function（）{
location.href=“../../../cardstiplier\u Warlock.html”；
};
document.getElementById（“rogue”）.onclick=function（）{
location.href=“../../../cardstiplier\u Rogue.html”；
};
document.getElementById（“minions”）.onclick=function（）{
location.href=“../../../cardstiplier\u MSOG\u Minions.html”；
};
document.getElementById（“拼写”）.onclick=function（）{
location.href=“../../../cardstiplier\u MSOG\u Spells.html”；
};
问题在于
.navbar开关的
z-index
。列表项具有更大的
z索引
，而
.navbar切换
缺少该索引。将此项添加到CSS将起作用：


.navbar切换{
z指数：5；
}


试着玩玩。


要将其与您的原始代码进行比较，请参阅。
让我知道我的答案是否适合您。就是这样，谢谢。我也很好奇，你知道我如何改变切换菜单中显示的菜单的颜色吗？@Bonteq你说的是哪种颜色？悬停的那一个？@Bonteq别忘了在5分钟后点击勾选按钮接受我的回答……当屏幕很小时——移动的——我点击切换按钮，它会在垂直位置显示菜单，它们都有特定的背景颜色。我想改变那些颜色。我还想更改鼠标悬停在菜单上时显示的颜色。。。。抱歉问了这么多问题。我会尽快接受你的回答。啊，我很抱歉。。。我以为我只是在使用一个典型的引导css。