[英]jQuery get data attribute and slidedown it's parent
I have some links (see below) where i put data-navigation
attribute, and what I'm trying to do is that the data-section
attribute slidesDown
based on it's data-navigation parent. 我有一些链接(请参阅下文),其中放置了
data-navigation
属性,而我想做的是data-section
属性基于它的data-navigation父slidesDown
。
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>
<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 CSS
#-navbar-home,
#-navbar-explore,
#-navbar-news {
display: none;
}
JavaScript /jQuery (I came so far, and cannot proceed) JavaScript / jQuery(到目前为止,我无法继续进行)
$(document).ready(function() {
$('li > a').hover(function() {
var navigation = $("a").data("navigation");
var section = $("section").data("section");
$(section).slideDown();
});
});
JS Fiddle JS小提琴
http://jsfiddle.net/66qz2by8/
Try utilizing Attribute Equals Selector [name="value"] 尝试利用属性等于选择器[name =“ value”]
var navigation = $(this).data("navigation");
var section = $("section[data-section=" + navigation + "]");
$(section).slideDown();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.