Question

我已根据data制作了一个滑动功能，我将链接放在data部分执行。除了我需要访问节区域的部分外，整个脚本工作正常。只要我将鼠标悬停在链接上，该部分就会出现，但是当我尝试在该部分中找到某个部分时，它会消失，只要我的鼠标悬停部分内容而不必更改html结构，我该怎么做才能弥补？如果该部分悬停，我该如何保持该链接加下划线？

HTML

<ul class="main-navbar-right">
    <li><a href="#" data-navigation="home">Home</a></li>
    <li><a href="#" data-navigation="explore">Explore</a></li>
    <li><a href="#" data-navigation="news">News</a></li>
</ul>

<div class="navigation-content">
    <section id="-navbar-home" data-section="home">
        <p>Home, some content images, videos and more and <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="explore">
        <p>Home explore <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="news">
        <p>Home news <a href="#">Link</a></p>
    </section>
</div>

CSS

#-navbar-home,
#-navbar-explore,
#-navbar-news {
    display: none;
}

a {
    text-decoration: none;
}

ul {
    width: 100%;
    display: block;
}

li {
    float: left;
    margin: 0 15px 0 0;
}

.active, a:hover {
    text-decoration: underline;
}

的JavaScript

var elem;
$('li > a').hover(function() {
        var navigation = $(this).data("navigation");
        var section = $("section[data-section="+navigation+"]");
        elem = $(section).slideDown();
    }, function() {
        elem.hide()
});

这是小提琴：http://jsfiddle.net/66qz2by8/6/

Answer 1

我认为这对你有用。只有在我添加了更大的div时才会出现.hide。

＆＃13;

$('.myapp').hover(function() {}, function() {
  $('section[data-section]').hide();
});

$('.main-navbar-right li > a').hover(
  function() {
    $('section[data-section]').hide();
    $("section[data-section=" + $(this).data("navigation") + "]")
      .slideDown();
  }, function(e) {}
);

＆＃13;

#-navbar-home,
#-navbar-explore,
#-navbar-news {
    display: none;
}

a {
    text-decoration: none;
}

ul {
  height: 20px;
    width: 100%;
    display: block;
  margin: 0px;
}
.navigation-content {
  height: 50px;
}
li {
  float: left;
  margin: 0 15px 0 0;
  margin-left: 10px;
}

.active, a:hover {
    text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myapp">
<ul class="main-navbar-right">
    <li><a href="#" data-navigation="home">Home</a></li>
    <li><a href="#" data-navigation="explore">Explore</a></li>
    <li><a href="#" data-navigation="news">News</a></li>
</ul>
<div class="navigation-content">
    <section id="-navbar-home" data-section="home" data-expanded="0">
        <p>Home, some content images, videos and more and <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="explore" data-expanded="0">
        <p>Home explore <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="news" data-expanded="0">
        <p>Home news <a href="#">Link</a></p>
    </section>
</div>
</div>

＆＃13;

Answer 2

而不是.mouseenter，请使用$('li > a').mouseenter(function () { var navigation = $(this).data("navigation"); var section = $("section[data-section=" + navigation + "]"); $("section").each(function () { if ($(this).data("section") != navigation) { $(this).fadeOut(); } }); elem = $(section).slideDown(); });。在显示新部分之前隐藏最后显示的部分。

见这里：https://jsfiddle.net/svArtist/vttjbbLy/

var elem;

<!-- Using to toggle the sidebar -->
<input type="checkbox" id="toggle" hidden="hidden">

<!-- The wrapper -->
<div class="wrapper">

  <!-- The content -->
  <div class="content">
    <label for="toggle">Show</label>
    <!-- Content goes here -->
  </div>

  <!-- The sidebar -->
  <aside class="sidebar">
    <label for="toggle">Hide</label>
    <!-- Sidebar content goes here -->
  </aside>

</div>

Answer 3

使用CSS，有一种非常简单的方法可以做类似的事情。你可以做的是附上＆＃34; drop-down＆＃34; li本身的元素，将其高度设置为0px，然后在悬停时更改其高度，稍加一点技巧（使用overflow：hidden来隐藏内容，并使用position：absolute来防止元素移位）链接）：

此处the fiddle.

.dropdown {
    width:200px;
    max-height:0px;
    transition:all 0s ease;
    -moz-transition:all 0s ease;
    -ms-transition:all 0s ease;
    -o-transition:all 0s ease;
    -webkit-transition:all 0s ease;
    overflow:hidden;
    position:absolute;
}
li:hover .dropdown, .dropdown:hover {
    max-height:200px;
    transition:all .4s ease;
    -moz-transition:all .4s ease;
    -ms-transition:all .4s ease;
    -o-transition:all .4s ease;
    -webkit-transition:all .4s ease;
}

只要它悬停，保持部分可见

3 个答案: