посмотреть все показать/скрыть дивы

Question

Я получил это показать/скрыть 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 но как раз наклоняю фигуру лучший способ.

Любые идеи?

Answer 1

Просто необходимо следующее дополнение:

var selector = link === '#' ? '.content .list' : link; 
var showIt = $(selector); 

Обновлено jsfiddle: http://jsfiddle.net/39eBk/4/

Answer 2

Нет такой вещи, как viewall метод. Но вы можете использовать все элементы и показать их!

if(link == '#') { 
    // show all the links! 
} 

Обратите внимание на #, так как вы получаете href гиперссылки, а затем показывая списки. Вы можете получить значение и сделать блок if else, после чего вы сможете показать их все за один раз!

Answer 3

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 
    }); 
}); 

Answer 4

Как вы эффективно использовать 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

Answer 5

Вот пример без 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; 
}