查看所有show / hide div

时间:2014-01-20 16:30:30

标签: javascript jquery html css

我让这个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,但却无法找到最好的方法。

有什么想法吗?

5 个答案:

答案 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)

Fiddle Demo

<强> 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();
    //...
}

Here is a working example

就个人而言,我宁愿不使用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");
    //...

Here it is in action

答案 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;
}