как сделать это шоу / скрыть более кратким? - PullRequest
Новая
       0

как сделать это шоу / скрыть более кратким?

3 голосов
/ 02 июня 2011

Есть много вопросов / примеров, которые можно показать / скрыть, но я не могу найти ответ.

У меня есть такой простой код, который используется в нескольких областях страницы. 

jQuery(document).ready(function () {
    jQuery('#mini-cart').hide(); 
    jQuery('#mini-cart-a').click(function ()  { 
        jQuery('#mini-cart').toggle(400);  
        return false; 
    }); 
});

Каждое шоу / скрытие использует свой собственный идентификатор, поэтому я просто группирую идентификаторы следующим образом: 

jQuery('#show-hide1, #show-hide2').hide();

Проблема с этим методом заключается в том, что, когда я нажимаю на элемент show / hid, отображаются все элементы.

Итак, я попробовал что-то подобное, но только первые работают, вторые не работают, когда я нажимаю на это, ничего не происходит. 

jQuery(document).ready(function () {
    jQuery('show-hide1, #show-hide2').hide();
    jQuery('show-hide1 a, #show-hide2 a').click(function () {
        jQuery(this).next().toogle(400);
    }
    return false;
    });
});

Есть 4 разных области, которые мне нужно показать / скрыть на странице, и я действительно не хочу повторять одни и те же коды 4 раза. Спасибо!

Обновление: (Извините, я не могу использовать Добавить комментарий, ни ответить на мой вопрос)

Спасибо всем за полезный ответ.

Версия Ли больше похожа на вкладки - я не хочу, чтобы скрытый div связывал идентификатор с тегом привязки. Это среда CMS, поэтому я стараюсь сделать ее проще, если это возможно.

Версия Энди имеет похожую проблему с идентификатором, поэтому я выбрал roXon

Roxon: http://jsbin.com/ihoqi3/2/ Нажмите на View Bag (2), вы увидите, что он работает, однако если вы перейдете на вкладку вопросов, нажмите «Задать вопрос», он откроет скрытый контейнер из View Bag.

Версия Джереми Б: http://jsbin.com/ibayu4 Скрывает текст toggleLink.

На странице примера "Выберите свой чай" и "Написать отзыв" на вкладке "Обзоры" требуется аналогичная обработка, но если я смогу заставить работать два упомянутых выше, остальные позаботятся сами:)

Сейчас я использую 4 отдельных кода, чтобы он работал.

p / s, мне нужно использовать привязку herf, потому что это важно для пользователя клавиатуры, поскольку JS show / hide скрытый div нельзя переключать.

Ответы [ 5 ]

2 голосов
/ 02 июня 2011

Сделал небольшой пример того, как вы могли бы это сделать: http://jsfiddle.net/ytx2J/

HTML: 

<a href="#" class="toggleLink" data-id="1">1</a> 
<a href="#" class="toggleLink" data-id="2">2</a> 
<a href="#" class="toggleLink" data-id="3">3</a>
<a href="#" class="toggleLink" data-id="4">4</a>

<div id="show-hide1">div 1</div>
<div id="show-hide2">div 2</div>
<div id="show-hide3">div 3</div>
<div id="show-hide4">div 4</div>

JS: 

$(function(){
    $('.toggleLink').click(function(ev){
       $('#show-hide'+$(this).data('id')).toggle(400); 
       ev.preventDefault();
    });
});
0 голосов
/ 02 июня 2011

Укажите класс, такой как ".tab" и идентификатор div, содержащего контент, который вы хотите отобразить для конкретного ".tab" т.е. 

$(".tab").click(function(){
   var clickedID = $(this).attr("class").split(" ")[1];
   $("#" + clickedID).toggle();
});

<div class="tab container1"></div>
<div id="container1">This container will be displayed if you click on the div .tab container 1</div>

<div class="tab container2"></div>
<div id="container2">This container will be displayed if you click on the div .tab container 2</div>
0 голосов
/ 02 июня 2011

Как и у Энди, но немного по-другому, чтобы удалить идентификаторы как ненужные.
Мы можем сделать это просто, верно?

jsFiddle demo 

<a href="#" class="toggleLink">1</a>
<a href="#" class="toggleLink">2</a>
<a href="#" class="toggleLink">3</a>
<a href="#" class="toggleLink">4</a>

<div class="show-hide">div 1</div>
<div class="show-hide">div 2</div>
<div class="show-hide">div 3</div>
<div class="show-hide">div 4</div>



$('.toggleLink').click(function(){
    $('.show-hide:eq('+ $(this).index() +')').toggle(400);
});

Это хорошая комбинация, когда якорь index указывает на элемент :eq() -> как на «0».

0 голосов
/ 02 июня 2011

Как и у Энди, но немного отличается, чтобы разрешить другую структуру идентификаторов

HTML 

<a href="#div1" class="toggleLink">1</a> 
<a href="#div2" class="toggleLink">2</a> 
<a href="#div3" class="toggleLink">3</a>
<a href="#div4" class="toggleLink">4</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>

JS 

$(function(){
    $('.toggleLink').click(function(ev){
       $($(this).attr('href')).toggle(400); 
       ev.preventDefault();
    });
});

Пример на JSFiddle

0 голосов
/ 02 июня 2011

начните с присвоения каждой области одного и того же класса. 

jQuery('.hider').click(function() {
    jQuery(this).toggle(400);
    return false;
});

Это вызовет переключение только у "бегунка", на которого вы нажали. Каждый будет работать независимо.

...