Показать / скрыть функцию с несколькими идентификаторами Div

Question

Так что я почти ничего не знаю о jQuery - но клянусь, я пытаюсь учиться.Дело в том, что у меня есть некоторый код, который работает - но я знаю, что он повторяется и, вероятно, не кошерный для настоящего программиста - вот почему я обратился ко всем вам.

Так что я хочу сделатьэто показать / скрыть (или переключить - что вы считаете лучше), некоторые информационные элементы или, как вы можете их назвать, на этой странице: Нажмите для какого-то чертовски плохого плохого кодирования jQuery

В любом случаекод показа / скрытия, который у меня сейчас есть, выглядит следующим образом:

    $(document).ready(function(){

    $('#meet_growlab, #buddy_tv').hide();

    $('a#growlab').click(function(){
    $('#meet_growlab').show('slow');
});

    $('a#growlab_close').click(function(){
    $('#meet_growlab').hide('slow');
})

    $('a#buddytv').click(function(){
    $('#buddy_tv').show('slow');
});

    $('a#buddytv_close').click(function(){
    $('#buddy_tv').hide('slow');
})


});

С HTML-кодом (в сущности, суть ...):

<div id="meet_growlab">BLAH BLAH BLAH
<p><a href="#" id="growlab_close">Close</a></p>
</div>

<div id="buddy_tv">BLAH BLAH BLAH
<p><a href="#" id="buddytv_close">Close</a></p>
</div>

<ul>
    <li><a href="#" id="growlab" rel="#meet_growlab">Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)</a></li>
    <li><a href="#" id="buddytv" rel="#buddy_tv">Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)</a></li>
</ul>

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

Answer 1

Вы можете использовать атрибут rel в качестве ссылки на div. Закрыть функционал можно написать проще, см. Пример: http://jsfiddle.net/mikhailov/Ra4Ad/

JS

$('#growlab, #buddytv').click(function() {
    var obj = $(this).attr('rel');
    $(obj).show('slow');
    return false
});

$('.close').click(function() {
    $(this).parents('div').hide('slow')
    return false
})

HTML

<div id="meet_growlab">
    BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<div id="buddy_tv">
    BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<ul>
    <li>
        <a href="#" id="growlab" rel="#meet_growlab">
            Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver 
            (June 24, 2011)
        </a>
    </li>
    <li>
        <a href="#" id="buddytv" rel="#buddy_tv">
            Building the Web's Best Entertainment-Based Community Site: 
            Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)
        </a>
    </li>
</ul>

Answer 2

Вы можете сделать так, чтобы ваш контент скользил вверх и вниз с помощью функции slideToggle, а также с помощью кнопки «закрыть».Вот как это будет выглядеть:

HTML

<div id="meet_growlab" class="content">BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<div id="buddy_tv" class="content">BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<ul>
    <li><a href="#" class="open" rel="#meet_growlab">
        Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)
    </a></li>
    <li><a href="#" class="open" rel="#buddy_tv">
        Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)
    </a></li>
</ul>

jQuery

$('.content').hide();

$('.open').click(function(){
    var section = $(this).attr('rel');
    $(section).slideToggle();
});

$('.close').click(function(){
    $(this).parents('.content').slideUp();
});

См. Пример здесь: http://jsfiddle.net/pXh37/

Таким образом, вы можете добавить дополнительные разделы контента позже, не изменяя код jQuery.Здесь есть довольно хороший пост:

http://www.ben -holland.co.uk / blog / coding / держать вещи-простые-и-общие-в-jquery /

Answer 3

Хорошо, это раздражающее поведение, когда видовой экран изменяется при нажатии на ссылку. Вы можете использовать «вернуть ложь»; чтобы исправить это; например,

$('a#buddytv_close').click(function() {
    // Do whatever.

    return false;
}

Я думаю, что вы должны переключаться между показом / скрытием. Это не обязательно для всей этой разметки, jQuery может пойти вам на пользу; например http://jsfiddle.net/wzdTL/. В окне «Вывод» - в правом нижнем углу - вы можете переключаться между отображением и скрытием содержимого.

«Возвращать false» для бита JS - остановить распространение события, потому что гиперссылка на самом деле не является гиперссылкой как таковой - отсюда и резкое изменение области просмотра, по крайней мере в Firefox / 7.0.1, - но просто для вызова toggle (), поэтому мы можем просто вернуть false.