标签事件无法正确触发

时间：2017-12-12 08:19:13

标签： jquery css

伙计我在制作mega menu tabs时遇到了问题，当我们将tabs隐藏在幕后的tabs mouseenter时，我正在做的是css事件已触发，.active和tabs上添加了名为tabs pane的{​​{1}}课程。一切正常，但当幕后mouseleave事件触发tabs时，用户无法将鼠标移至tabs pane。当鼠标位置超出tabs pane和tabs的边界时，我想要隐藏tabs pane。我的活动是否正确？

＆＃13;
＆＃13; 
$(document).ready(function () {
        // Select all tabs nav li items.
        var navs = $('.megamenu-tabs').children('.megamenu-tabs-nav').children('li');
        // div panes array which is all tabs pane that will show on hover
        var panes = $('.megamenu-tabs').children('.megamenu-tabs-pane');

        navs.on('mouseenter', function (e) {
            e.stopPropagation();
            e.preventDefault();
            // remove active class from all tabs
            navs.removeClass('active');
            // add class active on current tab
            $(this).addClass('active');
            // remove active class from all tabs pane
            panes.hide(0).removeClass('active');
            // add class on current tab pane
            $(panes[$(this).index()]).show(0).addClass('active');
        });


        navs.on('mouseleave', function (e) {
            e.stopPropagation();
            e.preventDefault();
            // remove active class from all tabs
            navs.removeClass('active');
            // remove active class from all tabs pane
            panes.hide(0).removeClass('active');

        });

    });
＆＃13; 
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
        }

        .container {
            width: 80%;
        }

        .megamenu-tabs {
            width: 100%;
            float: left;
            display: block;
            margin: 30px;

        }

        .megamenu-tabs-nav {
            width: 20%;
            margin: 0;
            padding: 0;
            float: left;
            list-style: none;
        }

        .megamenu-tabs-nav > li > a {
            width: 100%;
            padding: 10px 16px;
            float: left;
            word-wrap: break-word;
            font-size: 13px;
            text-decoration: none;
            color: #666;
            border: 1px solid #f0f0f0;
            outline: 0;
            background-color: #fff;
        }

        .megamenu-tabs-nav > li.active a,
        .megamenu-tabs-nav > li:hover a {
            background-color: #f3f3f3;
        }

        .megamenu-tabs-pane {
            width: 80%;
            min-height: 30px;
            padding: 20px;
            float: right;
            display: none;
            opacity: 0;
            font-size: 13px;
            color: #666;
            border: 1px solid #f0f0f0;
            background-color: #fff;
        }

        .megamenu-tabs-pane.active {
            display: block;
            opacity: 1;
        }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div class="container">
    <div class="megamenu-tabs">
        <ul class="megamenu-tabs-nav">
            <li><a href="#">Clothing</a></li>
            <li><a href="#">Gadgets</a></li>
            <li><a href="#">Mobiles & Smart Phones</a></li>
        </ul>

        <div class="megamenu-tabs-pane">

            <p>Clothing Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard
                dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It
                has
                survived not only five centuries, but also the leap into
                electronic
                typesetting, remaining essentially unchanged. It was popularised
                in
                the 1960s with the release of Letraset sheets containing Lorem
                Ipsum
                passages, and more recently with desktop publishing software
                like
                Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a> .</p>
        </div> <!-- close megamenu-tabs-pane 1 -->

        <div class="megamenu-tabs-pane">

            <p>Gadgets Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard
                dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It
                has
                survived not only five centuries, but also the leap into
                electronic
                typesetting, remaining essentially unchanged. It was popularised
                in
                the 1960s with the release of Letraset sheets containing Lorem
                Ipsum
                passages, and more recently with desktop publishing software
                like
                Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a>.</p>
        </div> <!-- close megamenu-tabs-pane 2 -->

        <div class="megamenu-tabs-pane">

            <p>Mobiles & Smart Phones Lorem Ipsum is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an
                unknown
                printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also
                the
                leap into electronic typesetting, remaining essentially
                unchanged.
                It was popularised in the 1960s with the release of Letraset
                sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                <a href="#">Lorem Ipsum</a>.</p>
        </div> <!-- close megamenu-tabs-pane 3-->

    </div> <!-- close megamenu-tabs -->
</div> <!-- close container div -->
</body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

您需要移除show(0)和hide(0)并添加一个小CSS，以确保在您浏览标签时将标签保持打开状态（将鼠标悬停在标签上）：

.megamenu-tabs-pane:hover {
display: block;
  opacity: 1;
}

完整代码：

$(document).ready(function() {
  // Select all tabs nav li items.
  var navs = $('.megamenu-tabs').children('.megamenu-tabs-nav').children('li');
  // div panes array which is all tabs pane that will show on hover
  var panes = $('.megamenu-tabs').children('.megamenu-tabs-pane');

  navs.on('mouseenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // add class active on current tab
    $(this).addClass('active');
    // remove active class from all tabs pane
    panes.hide(0).removeClass('active');
    // add class on current tab pane
    $(panes[$(this).index()]).addClass('active');
  });


  navs.on('mouseleave', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // remove active class from all tabs pane
    panes.removeClass('active');

  });

});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
}

.container {
  width: 80%;
}

.megamenu-tabs {
  width: 100%;
  float: left;
  display: block;
  margin: 30px;
}

.megamenu-tabs-nav {
  width: 20%;
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

.megamenu-tabs-nav>li>a {
  width: 100%;
  padding: 10px 16px;
  float: left;
  word-wrap: break-word;
  font-size: 13px;
  text-decoration: none;
  color: #666;
  border: 1px solid #f0f0f0;
  outline: 0;
  background-color: #fff;
}

.megamenu-tabs-nav>li.active a,
.megamenu-tabs-nav>li:hover a {
  background-color: #f3f3f3;
}

.megamenu-tabs-pane {
  width: 80%;
  min-height: 30px;
  padding: 20px;
  float: right;
  display: none;
  opacity: 0;
  font-size: 13px;
  color: #666;
  border: 1px solid #f0f0f0;
  background-color: #fff;
}

.megamenu-tabs-pane:hover {
  display: block;
  opacity: 1;
}

.megamenu-tabs-pane.active {
  display: block;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <div class="container">
    <div class="megamenu-tabs">
      <ul class="megamenu-tabs-nav">
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gadgets</a></li>
        <li><a href="#">Mobiles & Smart Phones</a></li>
      </ul>

      <div class="megamenu-tabs-pane">

        <p>Clothing Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a> .</p>
      </div>
      <!-- close megamenu-tabs-pane 1 -->

      <div class="megamenu-tabs-pane">

        <p>Gadgets Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 2 -->

      <div class="megamenu-tabs-pane">

        <p>Mobiles & Smart Phones Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
          and more recently with desktop publishing software like Aldus PageMaker including versions of
          <a href="#">Lorem Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 3-->

    </div>
    <!-- close megamenu-tabs -->
  </div>
  <!-- close container div -->
</body>

答案 1 :(得分：0)

添加此“var navs2 = $('.megamenu-tabs,.megamenu-tabs-pane');”并更改mouseleave on navs2。这样一旦您将鼠标悬停在导航标签上，它就不会隐藏，而是当您将鼠标悬停在.megamenu-tabs, .megamenu-tabs-pane.

之外时 

$(document).ready(function() {
  // Select all tabs nav li items.
  var navs = $('.megamenu-tabs').children('.megamenu-tabs-nav').children('li');
  var navs2 = $('.megamenu-tabs,.megamenu-tabs-pane');
  // div panes array which is all tabs pane that will show on hover
  var panes = $('.megamenu-tabs').children('.megamenu-tabs-pane');

  navs.on('mouseenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // add class active on current tab
    $(this).addClass('active');
    // remove active class from all tabs pane
    panes.hide(0).removeClass('active');
    // add class on current tab pane
    $(panes[$(this).index()]).show(0).addClass('active');
  });


  navs2.on('mouseleave', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // remove active class from all tabs pane
    panes.hide(0).removeClass('active');

  });

});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
}

.container {
  width: 80%;
}

.megamenu-tabs {
  width: 100%;
  float: left;
  display: block;
  margin: 30px;
}

.megamenu-tabs-nav {
  width: 20%;
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

.megamenu-tabs-nav>li>a {
  width: 100%;
  padding: 10px 16px;
  float: left;
  word-wrap: break-word;
  font-size: 13px;
  text-decoration: none;
  color: #666;
  border: 1px solid #f0f0f0;
  outline: 0;
  background-color: #fff;
}

.megamenu-tabs-nav>li.active a,
.megamenu-tabs-nav>li:hover a {
  background-color: #f3f3f3;
}

.megamenu-tabs-pane {
  width: 80%;
  min-height: 30px;
  padding: 20px;
  float: right;
  display: none;
  opacity: 0;
  font-size: 13px;
  color: #666;
  border: 1px solid #f0f0f0;
  background-color: #fff;
}

.megamenu-tabs-pane.active {
  display: block;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <div class="container">
    <div class="megamenu-tabs">
      <ul class="megamenu-tabs-nav">
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gadgets</a></li>
        <li><a href="#">Mobiles & Smart Phones</a></li>
      </ul>

      <div class="megamenu-tabs-pane">

        <p>Clothing Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a> .</p>
      </div>
      <!-- close megamenu-tabs-pane 1 -->

      <div class="megamenu-tabs-pane">

        <p>Gadgets Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 2 -->

      <div class="megamenu-tabs-pane">

        <p>Mobiles & Smart Phones Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
          and more recently with desktop publishing software like Aldus PageMaker including versions of
          <a href="#">Lorem Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 3-->

    </div>
    <!-- close megamenu-tabs -->
  </div>
  <!-- close container div -->
</body>

相关问题
最新问题