Question

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

所以我想要做的是在这个页面上显示/隐藏（或切换 - 你认为最好的）一些信息div，或者你可以称之为：Click for some pretty darn bad jQuery coding

无论如何，我现在的显示/隐藏代码就是这样：

    $(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

嗯，有这种恼人的行为，单击链接时视口会被更改。你可以使用“return false;”解决这个问题; e.g。

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

    return false;
}

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

JS位的“返回false”是为了停止事件传播，因为超链接本身并不是超链接 - 因此至少在Firefox / 7.0.1中会发生震动视口的变化 - 但只是为了调用toggle（），所以我们可以返回false。

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

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

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

3 个答案: