个人中心
gpt4 book ai didi

wordpress - 当页面处于事件状态时保持 Bootstrap 子菜单打开

转载 作者：行者123 更新时间：2023-12-03 08:25:24 29 4
gpt4 key购买 nike

我将 Bootstrao 与 wordpress 结合使用，我想知道当当前页面位于子菜单项中时，是否可以使 Bootstrap 子菜单保持打开状态。

我认为这可以使用 javascript 来实现，但我已经做了一些努力让它在没有真正合适的解决方案的情况下工作。

例如我有一个像这样的菜单关于 - 公司 - 包装优势 - 设计

当我选择任何子菜单页面时，我希望子菜单保持打开状态

我认为发布整个代码会很棘手，但到目前为止这就是我所做的

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>
  Company | </title>
  <meta name="description" content="Aliquam lobortis. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Aenean posuere, tortor sed cursus feugiat, nunc augue"/>

  <meta name="keywords" content="Company" />


    <!-- Bootstrap core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- fancybox -->
    <link href='//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css' rel="stylesheet">


    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet">

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

  <body>
     <div id="all">
                      <div id="nocover"></div>


   <section id="header">
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="col-sm-3">
          <a href="#" id="indexlogo" title="" class="img-responsive">
           <h1 class="sr-only">#</h1>
          </a>
        </div>


        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="col-sm-9">
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="main-menu-toggle">
                    <div class="menu-mainmenu-container"><ul id="menu-mainmenu" class="nav navbar-nav">
                    <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-parent current-page-parent current_page_parent menu-item-has-children dropdown menu-item-59"><a class="dropdown-toggle" data-toggle="dropdown" href="">ABOUT US <b class="caret"></b></a>
<ul class="dropdown-menu">
    <li id="menu-item--6" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-77 current_page_item active menu-item--6"><a href="#">Company</a></li>
    <li id="menu-item--7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--7"><a href="#">Packaging Benefits</a></li>
    <li id="menu-item--8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--8"><a href="#">Design</a></li>
</ul>
</li>
</ul></div>              </div><!-- /.navbar-collapse -->
        </div>
      </div><!-- /.container-fluid -->
    </nav>
  </section>







              <section id="content" class="container">
          <div class="row">
              <div class="col-sm-12">

                                        <div id="maincontent">
                                        </div>
              </div>
          </div><!-- // end row -->
      </section>
      <!-- // end section maincontent -->

         </div><!-- //end all -->
        <footer id="footer">

      </footer>

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

<!-- Load Custom javascripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<script src="http://gypthirtynine.wpengine.com/wp-content/themes/39-22/jquery.validate.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {



</script>
 </body>
</html>

CSS

.dropdown .dropdown-menu{
opacity: 0;
-moz-transition:    all 1000ms ease;
-webkit-transition: all 1000ms ease;
-o-transition:      all 1000ms ease;
-ms-transition:     all 1000ms ease;
transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
}

#main-menu-toggle li a{

}
#main-menu-toggle li {
height:50px;
line-height:50px;
}
#main-menu-toggle li .caret {
display:none;
}
#main-menu-toggle li a{
display:inline-block;
padding-right: 30px;
padding-left:0px;
background:none;
background-image:url(img/tilt.png);
background-repeat:no-repeat;
}

#main-menu-toggle li a{
color:#fff;
}
#main-menu-toggle li a:hover{
color:#00aeef;
}


/* submenu */
#main-menu-toggle li ul{
/*display:block;*/
height:50px;
z-index:9999 !important;

}

#main-menu-toggle li ul li a{
display:inline-block;
padding-right: 20px;
padding-left:0px;
background:url(img/tilt.png) no-repeat right 4px !important;
background-size:25% !important;


}

#main-menu-toggle li ul {
z-index:9999 !important;
width:500px;
background:none;
box-shadow:none;
}

#main-menu-toggle li ul:before {
content:" ";
position:absolute;
top:-40px;
left:-30px;
background:url(img/tiltbig.png) no-repeat 0 0;
height:80px;
width:59px;
z-index:-9999 !important;
cursor:pointer;
}

#main-menu-toggle li ul li{
float:left;
}

#main-menu-toggle li ul li a{
display:inline-block;
float:left;
color:#00aeef;
}

预先感谢您的帮助

最佳答案

试试这个对你有帮助。

jQuery(document).ready(function(e) {
    alert(jQuery('#menu-mainmenu').find('.current-menu-item').text());
	
	jQuery('#menu-mainmenu').find('.current-menu-item').closest('.current-menu-parent').children('.dropdown-toggle').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>



<body>
     <div id="all">
                      <div id="nocover"></div>


   <section id="header">
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="col-sm-3">
          <a href="#" id="indexlogo" title="" class="img-responsive">
           <h1 class="sr-only">#</h1>
          </a>
        </div>


        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="col-sm-9">
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="main-menu-toggle">
                    <div class="menu-mainmenu-container"><ul id="menu-mainmenu" class="nav navbar-nav">
                    <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-parent current-page-parent current_page_parent menu-item-has-children dropdown menu-item-59"><a class="dropdown-toggle" data-toggle="dropdown" href="">ABOUT US <b class="caret"></b></a>
<ul class="dropdown-menu">
    <li id="menu-item--6" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-77 current_page_item active menu-item--6"><a href="#">Company</a></li>
    <li id="menu-item--7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--7"><a href="#">Packaging Benefits</a></li>
    <li id="menu-item--8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--8"><a href="#">Design</a></li>
</ul>
</li>
</ul></div>              </div><!-- /.navbar-collapse -->
        </div>
      </div><!-- /.container-fluid -->
    </nav>
  </section>







              <section id="content" class="container">
          <div class="row">
              <div class="col-sm-12">

                                        <div id="maincontent">
                                        </div>
              </div>
          </div><!-- // end row -->
      </section>
      <!-- // end section maincontent -->

         </div><!-- //end all -->
        <footer id="footer">

      </footer>


 </body>

关于wordpress - 当页面处于事件状态时保持 Bootstrap 子菜单打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31246415/

29 4 0
文章推荐： spring-xd - 如何仅使用 java config 在 spring-xd 中创建作业
文章推荐： javascript - Null不是对象(评估
文章推荐： python-3.x - python3，出现错误 “Can' t分配给函数调用”
文章推荐： dotnetnuke - DNN模块开发
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com