jQuery顯示和隱藏div

我試圖用jQuery來顯示和隱藏兩個覆蓋DIV當我點擊頁腳中的鏈接（見下面的標記）。如果我點擊了其中一個鏈接，jQuery的行爲與預期相同：它隱藏了另一個疊加層，並顯示與我點擊的鏈接相匹配的DIV。如果我點擊條款和條件，然後再次點擊條款和條件，它將隱藏DIV，然後再次顯示相同的DIV。如果它已經可見，我想隱藏DIV。（我最初嘗試.toggle和行爲是一樣的。）在頁腳jQuery顯示和隱藏div

鏈接：

<a href="#terms">Terms and Conditions</a> 
<a href="#privacy">Privacy Policy</a>

的DIV在HTML：

<div class="meta" id="terms">Terms and Conditions</div> 
<div class="meta" id="privacy">Privacy Policy</div>

的jQuery：

$('footer a').click(function(e){ 
    $('.meta').hide(); 
    var div_to_show = $(this).attr('href'); 
    if($(div_to_show).is(':visible')) { 
     // hide corresponding div if it's visible 
     $(div_to_show).hide('fast'); 
    } else { 
     // show corresponding div if it's not visible 
     $(div_to_show).show('fast'); 
    } 
    e.preventDefault(); 
});

這工作：

if($(this.hash).is(':visible')) { 
    $('.meta').hide('fast'); 
} else { 
    $('.meta').hide('fast'); 
    $(this.hash).show('fast'); 
} 
e.preventDefault();

來源

2011-04-21 kirkaracha

正確的方法做到這一點：

var $meta = $('.meta'); 
$('footer a').click(function(e){ 
    var $div = $($(this).attr('href')); 
    $meta.not($div).hide(); 
    $div.toggle('fast'); 
    return false; 
});

使用.toggle()
緩存jQuery選擇在適當的時候

Demo

來源

2011-04-21 21:59:03

對不起，這不是。當我點擊條款和條件並且條款和條件已經可見時，它不會隱藏它。我需要第一次點擊條款和條件以顯示條款和條件，第二次點擊條款和條件以隱藏它。 – kirkaracha 2011-04-21 22:33:34

Gotcha - 請參閱我的編輯。 – 2011-04-21 22:39:54

很酷，謝謝！我可能會切換到這一個。 – kirkaracha 2011-04-21 22:53:32

爲什麼你不設置可見標誌？

var isVisible = false; 
$('footer a').click(function(e){ 
    $('.meta').hide(); 
    var div_to_show = $(this).attr('href'); 
    if(isVisible) { 
     // hide corresponding div if it's visible 
     $(div_to_show).hide('fast'); 
    } else { 
     isVisible = true; 
     $(div_to_show).show('fast'); 
    } 
    e.preventDefault(); 
});

來源

2011-04-21 21:54:52

這會切換一個div，當我點擊相應的鏈接兩次，但之後的頁腳鏈接都不起作用。 – kirkaracha 2011-04-21 22:39:29

點擊後您是否收到任何JavaScript錯誤？ – 2011-04-21 22:41:31

在檢查點擊鏈接的關聯div是否爲:visible之前，您隱藏了兩個div。

來源

2011-04-21 22:00:25

-1

這裏是顯示隱藏的div代碼...

JsFiddle

$(document).ready(function() { 
    $("#message_div").hide(); 
    //attach click event to buttons 
    $('.button-show').click(function() { 

     /** 
     * when show button is clicked we call the show plugin 
     * which scales the box to default size 
     * You can try other effects from here: http://jqueryui.com/effect/ 
     */ 
     $("#message_div").show(); 

    }); 

    $('.button-hide').click(function() { 

     //same thing happens except in this case we hide the element 
     $("#message_div").hide(); 

    }); 
});

，並在模板/ HTML文件。

<div id="message_div" style="width:80%; margin:0 auto; color:black;"> 
    <h1> This is Div One </h1> 
    <p> Your Content</p> 
<br /> 
<input type="button" value="Discard" class="button-hide" /> 
<br /> 
</div> 
<div style="width:80%; margin:0 auto; color:black; margin-top:25px"> 
<input type="button" value="Send Message" class="button-show" /> 
</div> 
<div style="width:80%; margin:0 auto; margin-top:25px"> 
    <h1>This is Div Two</h1> 
<p>Your Content</p> 
</div>

來源

2015-01-16 06:47:14

jQuery顯示和隱藏div

回答

相關問題