第二次點擊關閉切換格

Question

我使用下面的jQuery隱藏和顯示內容（切換），作爲我的網站中的樹狀導航菜單。我發現這個代碼非常有用，因爲通過點擊，它一次只顯示一個div。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
function show_region(chosen_region) { 
    $('.city_div').each(function(index) { 
      if ($(this).attr("id") == chosen_region) { 
       $(this).slideDown(200); 
      } 
      else { 
       $(this).slideUp(600); 
      } 
    }); 
} 
</script> 

<style type="text/css"> 
    .city_div {display: none;} 
</style> 


<a href="javascript:show_region('box01');">North</a><br> 
<div class="city_div" id="box01">Div #01</div> 

<a href="javascript:show_region('box02');">Centre</a><br> 
<div class="city_div" id="box02">Div #02</div> 

<a href="javascript:show_region('box03');">South</a><br> 
<div class="city_div" id="box03">Div #03</div> 

問題是我只能通過打開另一個div來關閉div。

如何通過第二次點擊關閉div？

Answer 1

您可以使用從slideDown到slideToggleslideToggle，變化：

function show_region(chosen_region) { 
    $('.city_div').each(function(index) { 
      if ($(this).attr("id") == chosen_region) { 
       $(this).slideToggle(200); // instead of slideDown 
      } 
      else { 
       $(this).slideUp(600); 
      } 
    }); 
} 

Answer 2

你應該保持一個變量與舊選擇的區域名稱

<script type="text/javascript"> 
    var old_chosen_region=""; 
    function show_region(chosen_region) { 
     $('.city_div').each(function(index) { 
      if (($(this).attr("id") == chosen_region)&&(chosen_region!=old_chosen_region)) { 
       $(this).slideDown(200); 
       old_chosen_region=chosen_region; 
      } else { 
       $(this).slideUp(600); 
      } 
     } 
     old_chosen_region=''; 
    }); 
</script> 

這使您可以「記住」你最後選擇了哪個區域，如果選擇一個等於您關閉它最後一次。

最後應該設置old_chosen_region=''以讓選項卡重新打開。

Answer 3

首先，不要使用內聯事件處理程序。

<script type="text/javascript"> 
$(document).ready(function() { 
    var boxes = $('.city_div'); 

    $('.city-toggle').click(function(e) { 
     var box = $(this).next(); 
     var isHidden = box.is(':hidden'); 

     boxes.slideUp(600); 

     if(isHidden) { 
      box.slideDown(200); 
     } 

     e.preventDefault(); 
    }); 
}); 
</script> 

<style type="text/css"> 
    .city_div {display: none;} 
</style> 


<a href="something-meaningful-like-north.html" class="city-toggle">North</a> 
<div class="city_div" id="box01">Div #01</div> 

<a href="ditto.html" class="city-toggle">Centre</a> 
<div class="city_div" id="box02">Div #02</div> 

<a href="same.html" class="city-toggle">South</a> 
<div class="city_div" id="box03">Div #03</div> 

另外，如果你的鏈接並不去任何地方有意義的，使用#作爲href並確保箱子都默認爲可見。 （在開始處使用boxes.hide();隱藏它們。）

此外，<br>不是您應該在那裏使用的。 <div> s已經是塊級元素。如果你想要更多的填充，給他們一個上邊距。

Answer 4

試試這個：

$(document).ready(function(){ 
    $('.city_div').click(function(){ 
     $(this).hide(); //or whatever code you want to hide it 
    }); 
}); 

當你點擊一個div這種方式，它會隱藏它。

Answer 5

由於您使用jQuery的你可以嘗試使用jQuery.toggle功能。

function show_region(chosen_region) { 
    $('#' + chosen_region).toggle('slide'); 
    return false; 
} 

Answer 6

首先，你爲什麼要使用這樣一個老版本的jQuery？

其次，您的JavaScript可以簡化。 jQuery在集合上工作;你不需要.each或循環。

這裏是一個工作示例：http://jsfiddle.net/gibble/25P9z/

簡體HTML：

<a href="#" data-contentDiv="box01">North</a><br> 
<div class="city_div" id="box01">Div #01</div> 

<a href="#" data-contentDiv="box02">Centre</a><br> 
<div class="city_div" id="box02">Div #02</div> 

<a href="#" data-contentDiv="box03">South</a><br> 
<div class="city_div" id="box03">Div #03</div>​ 

新的JavaScript：

function show_region(e) { 
    var $target = $(e.target); 
    var chosen_region = $target.attr('data-contentDiv'); 

    var openDiv = $('#' + chosen_region); 

    openDiv.slideDown(200); 
    $('.city_div').not(openDiv).slideUp(600); 
} 

最後，附上事件，不要在你的HTML內聯它們。

$('a[data-contentDiv]').click(show_region);​ 

Answer 7

跟蹤你點擊最後的div：

var globalLastClickedButtonId; 
$("div.city_div").click(function() { 
    if (globalLastClickedButtonId == $(this).attr("id")) { 
     $(this).hide(); 
    } else { 
     var box = $(this).next().next(); 
     var clickedId = $(this).attr("id"); 
     $("div.city_div").each(function() { 
      if ($(this).attr("id") == clickedId) 
       box.slideDown(200); 
      else 
       box.slideUp(600); 
     } 
    } 
    globalLastClickedButtonId = $(this).attr("id"); 
}); 

Answer 8

由於您使用的是動畫最好是跟蹤當前顯示的div。如果你不這樣做，那麼如果你連續點擊鏈接，你將會看到多個div顯示。

您可以使用此：

$(function() { 
    $("a").click(function(e) { 
     e.preventDefault(); 
     var selectedDiv = $("#" + $(this).attr("href")); 
     var hide = selectedDiv.data("shown"); 

     $(".city_div").slideUp(600); 
     $(".city_div").data("shown", false); 

     if (hide) { 
      selectedDiv.data("shown", false); 
     } 
     else { 
      selectedDiv.data("shown", true); 
      selectedDiv.slideDown(200); 
     } 
    }); 
});​ 

Here is a working example