使用jQuery通過單擊鏈接取消隱藏div

Question

為此，我正在使用colorbox jQuery插件http://colorpowered.com/colorbox/和一個表單。 我正在嘗試使用jQuery colorbox取消隱藏包含表單的div ，並在單擊以下相關鏈接時將其顯示在colorbox中。

這是我使用的標頭中的javascript：

$(document).ready(function() {
    $('#password_reset').ajaxForm({
        success: showResponse,
        clearForm: 'true'
    });

    function showResponse(responseText, statusText) {
        $('#password_reset').hide();
        $('#formStatus').html(responseText);
    };

    $().bind('cbox_open', function() {
        $('#password_reset').show();
        $('#formStatus').html('');
    });

    $(".inline").colorbox({
        width: "300px",
        height: "250px",
        inline: true,
        href: "#password_change"
    });
});

這是我應該運行我的javascript代碼（上面）並取消隱藏下面的div並將其運行到colorbox中的鏈接：

<a href="javascript:showResponse">Password Reset</a>

這是我隱藏的div：

<div style="visibility: hidden;">
    <div id='password_change' style="padding:10px; background:#fff;">
        <strong>Change your password</strong><br /><br />
        <form id="password_reset" action="password_reset.php" method="post">
            <input type="hidden" name="Method" value="updatePassword"  />
            Password: <br />
            <input type="password" name="password1" />
            <br />
            <br />
            Verify Password: <br />
            <input type="password" name="password2" />
            <br />
            <input type="submit" value="Update" />
        </form>
        <div id="formStatus"></div>
    </div>
</div>

希望有人能告訴我如何將其完全卡住，而且我知道這是我在這里犯的一個小錯誤，但我不知道該如何解決。 請幫忙？

Answer 1

griegs的答案在那兒。 jQuery在div元素上的顯示和隱藏等同於display：block; 並顯示：無； 所以應該是這樣的：

<div id="DIV_password_reset" style="display:none;">

$('#DIV_password_reset').show();

如果要使用可見性，請執行以下操作：

<div id="DIV_password_reset" style="visibility:hidden;">

$('#DIV_password_reset').css('visibility', 'visible');

Answer 2

<div id="DIV_password_reset" style="visibility: hidden;">

$('#DIV_password_reset').show();

您設置表單的可見性，而不是div。

Answer 3

我認為您需要使用jQuery這樣的東西：

jQuery(document).ready(function(){
    jQuery('.show').live('click', function(event) {        
        $("#yourDivId").attr({style: "visibility: show;"});
    });
});​

檢查jsfiddle.net

更多信息：

• 使用JQuery更改或設置HTML標簽屬性
• jQuery .attr（）