我让这个show / hide div运作良好:
<ul class="menu">
<li><a href="#list1">List 1</a></li>
<li><a href="#list2">List 2</a></li>
<li><a href="#">View All</a></li>
</ul>
<div class="content">
<div class="list current" id="list1"> Test 1</div>
<div class="list" id="list2">Test 2</div>
</div>
此处显示: 的 Show/Hide and View All
我无法弄清楚我怎样才能使用我拥有的方法jquery来执行查看全部(我有空白)?
我在想.show
,但却无法找到最好的方法。
有什么想法吗?
答案 0 :(得分:3)
只需要添加以下内容:
var selector = link === '#' ? '.content .list' : link;
var showIt = $(selector);
更新了jsfiddle:http://jsfiddle.net/39eBk/4/
答案 1 :(得分:1)
没有viewall
方法这样的东西。但是你可以使用所有元素并显示它们!
if(link == '#') {
// show all the links!
}
请注意#
,因为您获得了超链接的href
,然后显示了列表。您可以获取值并执行if else
块,之后您可以一次显示所有值!
答案 2 :(得分:1)
<强> HTML 强>
<li><a href="#all" id="all">View All</a></li>
<强> JS 强>
$(document).ready(function () {
$(".menu a").not('#all').click(function () { //not handle id a tag with id all
var link = $(this).attr('href');
var showIt = $(link);
var hideIt = $(".list.current");
hideIt.fadeOut(100, function () {
hideIt.removeClass("current");
showIt.addClass("current");
showIt.fadeIn(100);
});
});
$('#all').click(function () { // handle a tag with id all
$(".content > div").fadeIn(100).addClass("current"); show all div under class content and add class current
});
});
答案 3 :(得分:1)
由于您实际使用href
作为JQuery选择器,因此您只需将查看全部href
设置为类选择器.list
:
<a href=".list">View All</a>
防止链接的默认行为也很重要:
$(".menu a").click(function (e) {
e.preventDefault();
//...
}
就个人而言,我宁愿不使用href
来存储除了它之外的任何东西,所以使用data-*
属性可能更好:
<li><a href="#list2" data-selector="#list2">List 2</a></li>
<li><a href="#" data-selector=".list">View All</a></li>
然后......
$(".menu a").click(function (e) {
e.preventDefault();
var link = $(this).data("selector");
//...
答案 4 :(得分:0)
这是一个没有jQuery动画的例子。 CSS3 Transition FTW!
http://jsfiddle.net/brendonparker/39eBk/8/
使用Javascript:
$(document).ready(function(){
$(".menu a").click(function() {
var link = $(this).attr('href');
var showIt = $(link);
var hideIt = $(".list.current");
if(link == '#'){
$('.content .list').addClass('current');
return;
} else {
$('.content .list').removeClass('current');
$(link).addClass('current');
}
});
});
HTML:
<ul class="menu">
<li><a href="#list1">List 1</a></li>
<li><a href="#list2">List 2</a></li>
<li><a href="#list3">List 3</a></li>
<li><a href="#">View All</a></li>
</ul>
<div class="content">
<div class="list current" id="list1"> Test 1</div>
<div class="list" id="list2">Test 2</div>
<div class="list" id="list3">Test 3</div>
</div>
CSS:
.menu {list-style: none !important; margin: 0 !important; overflow: hidden;}
.list {
display: block;
-webkit-transition: opacity 1s linear;
opacity: 0;
height: 0;
overflow: hidden;}
.list.current {
opacity: 1;
height: auto;}
.menu li {
float: left;
margin: 0 !important;
padding: 0 .6em;
line-height: .8em !important;
}