具有多个 Div ID 的显示/隐藏功能

Question

所以我对 jQuery 几乎一无所知——但我发誓我正在努力学习。问题是，我有一些有效的代码 - 但我知道它是重复的，并且对于真正的程序员来说可能不合规矩 - 这就是为什么我向你们求助。

所以我想做的是显示/隐藏（或切换 - 无论你认为最好的）一些信息 div，或者你可以这样称呼它们，在此页面上： 单击一些非常糟糕的 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

您可以使用 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/keeping-things-simple-and-generic-in-jquery/

Answer 2

您可以使用 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 3

好吧，有一个令人讨厌的行为，即单击链接时视口会发生更改。您可以使用“return false;”解决这个问题；例如，

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

    return false;
}

我认为您要在显示/隐藏之间切换。对于所有这些标记来说，并不是真的有必要， jQuery 可以很好地为您服务；例如 http://jsfiddle.net/wzdTL/。在“输出”窗口（右下角）中，您可以单击以在显示和隐藏内容之间切换。

JS 位的“返回 false”是为了停止事件传播，因为超链接本身并不是真正的超链接——因此，至少在 Firefox/7.0.1 中会出现令人不快的视口变化——但只是调用toggle() ，所以我们可以直接返回 false。