个人中心
gpt4 book ai didi

javascript - 使 bootstrap mega 菜单在悬停时打开而不是在单击时打开

转载 作者：太空宇宙 更新时间：2023-11-04 01:20:00 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 大型菜单，我根据需要设置样式和工作，但是我需要它在悬停时(而不是单击时)为桌面设备打开。我原以为只用 css 就能轻松做到这一点，但我无法让它工作。

有什么建议吗？我对使用 jQuery 或 jscript 持开放态度，但我对这些还不是很流畅。

工作 jsfiddle:https://jsfiddle.net/L2o657p6/4/

HTML:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Mega Menuu</title>

</head>

<body>


<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Menu Logo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Today <span class="sr-only">(current)</span></a>

          <div class="dropdown-container">
              <div class="container">
                <div class="row">
                  <div class="col-sm-6 col-md-4">
                    <div class="media">
                      <div class="media-left">
                        <a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
                        <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                        <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                      </div>
                      <div class="media-body">
                        <h5>Today's Featured Collections</h5>
                        <ul class="list-links">
                          <li><a href="#">Press Every Button</a></li>
                          <li><a href="#">Travel with Technology</a></li>
                          <li><a href="#">Smart Choice</a></li>
                          <li><a href="#">Fall in Love with Tech</a></li>
                          <li><a href="#">Smartphones at a Snip</a></li>
                        </ul>

                      </div>
                    </div>
                  </div><!-- /col -->

              <div class="col-sm-6 col-md-4">
                <div class="media">
                  <div class="media-left">
                    <a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                  </div>
                  <div class="media-body">
                    <h5>Today's Trending Collections</h5>
                    <ul class="list-links">
                      <li><a href="#">Harley-Davidson</a></li>
                      <li><a href="#">Will you be my Valentine?</a></li>
                      <li><a href="#">Summer Wedding Bridesmaid Dresses</a></li>
                      <li><a href="#">Pink Wedding Centerpiece Ideas</a></li>
                      <li><a href="#">Wedding Party Table Runners</a></li>
                      <li><a href="#">Backyard Wedding Reception</a></li>
                    </ul>

                  </div>
                </div>
              </div><!-- /col -->

              <div class="col-sm-6 col-md-4">
                <h5>My Collections</h5>
                <span class="text-muted">You currently have no collections. <a href="#">Learn how to create one</a>.</span>
              </div><!-- /col -->

            </div><!-- /row -->
              </div>
          </div><!-- /dropdown-container -->

        </li>
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fashion</a>
          <div class="dropdown-container">
            <div class="row">
              <div class="col-sm-4 col-md-2">

                <h5>Top categories</h5>
                <ul class="list-links">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Men's</a></li>
                  <li><a href="#">Women's</a></li>
                  <li><a href="#">Kids</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-4 col-md-3">

                <h5>Shop for</h5>
                <ul class="list-links">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Jewelry &amp; Watches</a></li>
                  <li><a href="#">Handbags &amp; Accessories</a></li>
                  <li><a href="#">Health &amp; Beauty</a></li>
                  <li><a href="#">Shoes</a></li>
                  <li><a href="#">Sales &amp; Events</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-12 col-md-7">
                <img src="holder.js/100px200">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>

        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Electronics</a>

          <div class="dropdown-container">
            <div class="row">
              <div class="col-sm-4 col-md-2">

                <h5>Top categories</h5>
                <ul class="list-links">
                  <li><a href="#">Cell Phones &amp; Accessories</a></li>
                  <li><a href="#">Cameras &amp; Photo</a></li>
                  <li><a href="#">Computers &amp; Tablets</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-4 col-md-3">

                <h5>Other categories</h5>
                <ul class="list-links">
                  <li><a href="#">Car Audio, Video &amp; GPS</a></li>
                  <li><a href="#">iPhone</a></li>
                  <li><a href="#">iPad</a></li>
                  <li><a href="#">TV, Audio</a></li>
                  <li><a href="#">Video Games &amp; Consoles</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-12 col-md-7">
                <img src="holder.js/100px200">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Deals</a>

          <div class="dropdown-container">
            <div class="row">

              <div class="col-sm-3">

                <h5>Best deals of the day</h5>
                <ul class="list-links">
                  <li><a href="#">Car Audio, Video &amp; GPS</a></li>
                  <li><a href="#">iPhone</a></li>
                  <li><a href="#">iPad</a></li>
                  <li><a href="#">TV, Audio</a></li>
                  <li><a href="#">Video Games &amp; Consoles</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Waterproof cellphone cover</h5>
                    <p>$5.99</p>
                  </div>
                </a>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Large 20 slot leather watch box organizer</h5>
                    <p>$25.99</p>
                  </div>
                </a>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Samsung Galaxy Tab A SM-P550NZAAXAR 9.7-Inch W-Fi Tablet (Titanium with S-Pen)</h5>
                    <p>$319</p>
                  </div>
                </a>

              </div><!-- /col -->


            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>

        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contact Us</a>

          <div class="dropdown-container">
            <div class="row">

              <div class="col-sm-6 col-md-4">
                <h5>Contact us</h5>
                <p>Feel free to drop us a line, we will respond as sson as possible.</p>
                <form>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email">
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputText1">Text</label>
                    <textarea type="password" class="form-control" id="exampleInputText1" placeholder="Your Message" rows="3"></textarea>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
              </div><!-- /col -->

              <div class="col-sm-6 col-md-8">
                <img src="holder.js/100px260?text=Map">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</body>
</html>

CSS:

.nav > .dropdown-megamenu {
  position: static;
}
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-container {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
}
.dropdown-megamenu > .dropdown-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 100%;
  padding: 15px;
}
.dropdown-megamenu .dropdown-menu {
  display: block;
}
.link-image .media-object {
  float: left;
  margin-bottom: 7.5px;
}
.link-image-sm + .link-image-sm .media-object {
  margin-left: 7.5px;
}
.thumbnail .caption {
  min-height: 120px;
}
.thumbnail:hover {
  text-decoration: none;
}
/* Link list */
.list-links {
  list-style: none;
  padding: 0;
}
.list-links li {
  line-height: 1.71428571;
}
.list-links a {
  color: #555;
}
.list-links a:hover,
.list-links a:focus,
.list-links a:active {
  color: #22527b;
}

html,
body {
  height: 100%;
  min-height: 500px;
}
body {
  background: -webkit-linear-gradient(top, #59a874 0, #449a63 100%);
  background: linear-gradient(to bottom, #59a874 0, #449a63 100%);
}
  h3 {
      font-family: 'Open Sans', sans-serif;
      font-weight: bold;
      text-align: center;
      line-height: 1.3;
      margin-bottom: 2rem;
      color: #fff;
    }

最佳答案

您可以只添加一个仅限桌面的媒体查询:

@media (min-width: 768px){
    .navbar-nav .dropdown-megamenu:hover .dropdown-container {
        display: block;
    }
}

这是一个 fiddle :https://jsfiddle.net/vqubh18j/

如果您愿意，您可以将选择器缩小到 dropdown:hover .dropdown-container。

另请注意，下拉菜单上有一个 2px 的上边距，它在导航栏和下拉菜单之间形成一个微小的间隙，允许较慢的鼠标移动器使菜单无意中消失:

.dropdown-container {
    ...
    /* Should probably be removed or replaced with
       margin: 0; border-top: 2px solid transparent; */
    margin: 2px 0 0;
    ...
}

关于javascript - 使 bootstrap mega 菜单在悬停时打开而不是在单击时打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49288123/

25 4 0
文章推荐： python - 使 _tkinter.createfilehandler 再次工作(或提供解决方法)
文章推荐： node.js - STM MP157C DK2 Node.js 可以吗？
文章推荐： c++ - 手动更改 unsigned int 中的一组字节
文章推荐： python - 从 Google App Engine 访问 Xero
太空宇宙
个人简介

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

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