第二次点击关闭切换格

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