Question

我想使用单个jQuery函数来触发不同的鼠标悬停功能来显示不同的内容。这是我的HTML和Jquery代码。你能帮我简化一下吗？或者找到其他更好的解决方案？

HTML

  <div class="container home-firstscreen-main">
    <div class="row">
      <div class="col-lg-2">
        <ul class="list-unstyled category-nav">
         <li role="presentation"><a href="#" class="home-link">Home</a></li>
         <li role="presentation"><a href="#" class="profile-link">Profile</a></li>
         <li role="presentation"><a href="#" class="messages-link">Messages</a></li>
       </ul>
     </div>
     <div class="col-lg-6">
       <div class="mega-menu-show">
         <ul class="list-unstyled home-items">
           <li role="presentation"><a href="#">Tony</a></li>
           <li role="presentation"><a href="#">stark</a></li>
         </ul>

         <ul class="list-unstyled profile-items">
           <li role="presentation"><a href="#">Captain</a></li>
           <li role="presentation"><a href="#">America</a></li>
         </ul>

         <ul class="list-unstyled messages-items">
           <li role="presentation"><a href="#">Black</a></li>
           <li role="presentation"><a href="#">Widow</a></li>
         </ul>
       </div>
      </div>
   </div>
 </div>

的jQuery

$(".category-nav a").on("mouseover", function () {
    $('.mega-menu-show').fadeIn();
    var catLinkClass = $(this).attr('class');
    var catLinkUse   = catLinkClass.replace('-link', '');
    $('.mega-menu-show .' + catLinkUse +'-items').show();
});
// show category nav on mouse out
$(".category-nav a").on("mouseout", function () {
    $('.mega-menu-show').fadeOut();
    $('.mega-menu-show ul').hide();
});

Answer 1

如果我明白你的意思，你可以使用类似的东西

＆＃13;

$(".category-nav a").on("mouseover", function () {
    $('.mega-menu-show').fadeIn();
    var catLinkClass = $(this).attr('class');
    var catLinkUse   = catLinkClass.replace('-link', '');
    $('.mega-menu-show [class$="-items"]').hide();
    $('.mega-menu-show .' + catLinkUse +'-items').show();
});
// show category nav on mouse out
$(".mega-menu-show").on("mouseleave", function () {
    $(this).fadeOut();
});

＆＃13;

.mega-menu-show [class$="-items"]{
  display : none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container home-firstscreen-main">
    <div class="row">
      <div class="col-lg-2">
        <ul class="list-unstyled category-nav">
         <li role="presentation"><a href="#" class="home-link">Home</a></li>
         <li role="presentation"><a href="#" class="profile-link">Profile</a></li>
         <li role="presentation"><a href="#" class="messages-link">Messages</a></li>
       </ul>
     </div>
     <div class="col-lg-6">
       <div class="mega-menu-show">
         <ul class="list-unstyled home-items">
           <li role="presentation"><a href="#">Tony</a></li>
           <li role="presentation"><a href="#">stark</a></li>
         </ul>

         <ul class="list-unstyled profile-items">
           <li role="presentation"><a href="#">Captain</a></li>
           <li role="presentation"><a href="#">America</a></li>
         </ul>

         <ul class="list-unstyled messages-items">
           <li role="presentation"><a href="#">Black</a></li>
           <li role="presentation"><a href="#">Widow</a></li>
         </ul>
       </div>
      </div>
   </div>
 </div>

＆＃13;

Answer 2

你可以在像这样的单个jQuery函数中使用它。

$(document).on({
    mouseover: function () {
        $('.mega-menu-show').fadeIn();
        var catLinkClass = $(this).attr('class');
        var catLinkUse = catLinkClass.replace('-link', '');
        $('.mega-menu-show .' + catLinkUse + '-items').show();
    },
    // show category nav on mouse out
    mouseout: function () {
        $('.mega-menu-show').fadeOut();
        $('.mega-menu-show ul').hide();
    }
}, ".category-nav a");

FIDDLE DEMO

希望这有帮助！

Answer 3

找到了一个很棒的解决方案，也需要改变HTML的结构。谢谢，每个人都给了我所需的灵感。

<强> HTML

<div class="container home-firstscreen-main">
        <div class="row">
          <div class="col-lg-2">
            <ul class="list-unstyled category-nav">
             <li role="presentation"><a href="#" class="home-link">Home</a>
              <div class="mega-menu-show home-items">
               <ul class="list-unstyled">
                 <li role="presentation"><a href="#">Tony</a></li>
                 <li role="presentation"><a href="#">yaddaYaddaYadda</a></li>
                 <li role="presentation"><a href="#">pfftPfftPfft</a></li>
                </ul>
             </div>
           </li>
           <li role="presentation"><a href="#" class="profile-link">Profile</a>
            <div class="mega-menu-show profile-items">
             <ul class="list-unstyled">
               <li role="presentation"><a href="#">Wang</a></li>
               <li role="presentation"><a href="#">yaddaYaddaYadda</a></li>
               <li role="presentation"><a href="#">pfftPfftPfft</a></li>
             </ul>
           </div>
         </li>
         <li role="presentation"><a href="#" class="messages-link">Messages</a>
          <div class="mega-menu-show messages-items">
           <ul class="list-unstyled">
             <li role="presentation"><a href="#">Stark</a></li>
             <li role="presentation"><a href="#">yaddaYaddaYadda</a></li>
             <li role="presentation"><a href="#">pfftPfftPfft</a></li>
           </ul>
         </div>
       </li>
     </ul>
   </div>
 </div>
</div>

<强>的jQuery

$( document ).ready(function() {
     $('.category-nav>li').hover(function() {
  $(this).find(".mega-menu-show").fadeIn(200);
 }, function() {
  $(this).find(".mega-menu-show").fadeOut(100);
 });
});

Answer 4

首先，您可以通过将2个变量合并为1来简化代码。

$(".category-nav a").on("mouseover", function () {
    $('.mega-menu-show').fadeIn();
    var catLinkClass = $(this).attr('class').replace('link', 'items');
    $('.mega-menu-show .' + catLinkClass).show();
});
// show category nav on mouse out
$(".category-nav a").on("mouseout", function () {
    $('.mega-menu-show').fadeOut();
});

如何使用相同的jQuery函数触发不同的鼠标操作？

4 个答案: