我有一些链接(见下文),我在其中放置了 data-navigation
属性,而我想要做的是 data-section
属性 slidesDown
基于它的数据导航父级。
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>
<section id="-navbar-home" data-section="home">
<p>Home content</p>
</section>
<section id="-navbar-explore" data-section="explore">
<p>Home explore</p>
</section>
<section id="-navbar-explore" data-section="news">
<p>Home news</p>
</section>
CSS
#-navbar-home,
#-navbar-explore,
#-navbar-news {
display: none;
}
JavaScript/jQuery(我来得太远了,无法继续)
$(document).ready(function() {
$('li > a').hover(function() {
var navigation = $("a").data("navigation");
var section = $("section").data("section");
$(section).slideDown();
});
});
JS fiddle
http://jsfiddle.net/66qz2by8/
最佳答案
尝试使用 Attribute Equals Selector [name="value"]
var navigation = $(this).data("navigation");
var section = $("section[data-section=" + navigation + "]");
$(section).slideDown();
关于javascript - jQuery 获取数据属性并向下滑动它的父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30315377/