Question

能否请您帮我将其转换为点击事件，而不是将鼠标悬停

<script>
$(document).ready(function () {
    //Show then hide ddown menu on hover
    $('.menuitem').hover(function () {
        $(this).children('.navmain').slideDown(500);
    }, function () {
        $(this).children('.navmain').slideUp(500);
    });
}); 
</script>

完整脚本：jQuery Dropdown Menu hover Slide Down/Up

我尝试了多种方法并得到了满足。

感谢您的帮助。

Answer 1

使用on，并在函数调用之前将çlick作为第一个参数传递。

<script>
$(document).ready(function () {
    //Show then hide ddown menu on hover
    $('.menuitem').on('click', function () {
    $(this).children('.navmain').slideDown(500);
    }, function () {
        $(this).children('.navmain').slideUp(500);
    });
}); 
</script>

Answer 2

我认为这对您来说很好：

我已将.slideDown(500)和.slideUp(500)更改为.slideToggle(500)

$(document).ready(function() {
  //Show then hide ddown menu on hover
  $(document).on('click', '.menuitem', function() {
    $(this).children('.navmain').slideToggle(500);
  });
});

.top>li:hover {
  text-decoration: underline;
}


/* On hover show the menu drop down */


/* Position the menu drop down relative to the nav bar */

.top>li>div {
  position: absolute;
  left: 0;
  top: 41px;
  /* Don't show unless the nav bar li is hovered */
  display: none;
  background: #fff;
  padding: 10px 10px;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
  /* Hide anything that might be outside the div */
  overflow: hidden;
}


/* End of Navigation Bar Styling */


/* Drop Down Menu Styling */

.navmain {
  width: 100%;
  border: 1px solid #B2BEB5;
}

.nav-divider {
  display: inline-block;
  width: 1.8%;
}

.nav-focus-art {
  display: inline-block;
  width: 20%;
  vertical-align: top;
  text-align: left;
  animation-duration: 4s;
}

.nav-art-author,
.nav-art-title {
  display: inline-block;
  padding: 5px 0px;
}

.nav-art-title {
  font-size: 1.4em;
}

.nav-art-image {
  display: inline-block;
}

.nav-divider-2 {
  display: inline-block;
  width: 3.8%;
}

.nav-headlines {
  display: inline-block;
  width: 40%;
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  padding-right: 3px;
}

.nav-headline-link {
  border-bottom: 1px solid #B2BEB5;
  padding: 0 0 5px 0;
}

.nav-headline-text {
  padding: 10px 0px;
  font-family: 'Arapey', serif;
  color: #000000;
  font-size: 17px;
  font-weight: 400;
}

.nav-art-author {
  font-size: 15px;
  text-decoration: none;
}

a.nav-text-link:link,
a.nav-text-link:visited,
a.nav-text-link:hover,
a.nav-text-link:active {
  text-decoration: none;
  color: #603c68;
  font-weight: 400;
}

a.nav-text-link:hover {
  text-decoration: none;
  font-weight: 700;
}

.nav-headline-link:last-child {
  border-width: 0px;
}

.nav-links {
  display: inline-block;
  width: 20%;
  vertical-align: top;
  text-align: left;
}

.nav-link {
  padding-bottom: 20px;
}

.nav-empty-cell {
  padding-top: 40px;
}

.nav-headline-link:first-child {
  color: #bfa76a;
  font-size: 40px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

.nav-link:first-child {}


/* End of Drop Down Menu Styling */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul class="top" id="ddm">
    <li><a href="#">home</a></li>
    <li class="menuitem"><a href="#">bras</a>
      <div class="navmain">
        <div class="nav-divider"></div>
        <div class="nav-headlines">
          <div class="nav-headline-link">BRAS</div>
          <div class="nav-headline-text">Gi&#275; Gi&#275; specializes in finding comfortable, well fitting, beautiful bras for all women. Come and experience a professional bra fitting with one of our certified fitters. We have a fabulous selection of amazing bras, sizes ranging from
            28 inch to 56 inch bands and AA to J cups!!</div>
        </div>
        <div class="nav-divider-2"></div>
        <div class="nav-focus-art">
          <span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Strapless Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Nursing Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Minimizer Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Push-up Bra</a></span><br>
        </div>
        <div class="nav-divider-2"></div>
        <div class="nav-focus-art">
          <span class="nav-art-author"><a href="#" class="nav-text-link">Post-surgical Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Mastectomy Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Backless Bra</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Bathing Suits (or swimwear?)</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Boustiers</a></span><br>
          <span class="nav-art-author"><a href="#" class="nav-text-link">Bralettes</a></span><br>
        </div>
        <div class="nav-divider-2"></div>

      </div>
      <!-- End of nav-main -->
    </li>
    <li><a href="#">MASTECTOMY</a></li>
  </ul>

希望这对您有所帮助。

将悬停转换为Click事件

2 个答案: