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

您可以使用slideToggle，从slideDown更改为slideToggle：

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">
$(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>已经是块级元素。如果你想要更多的填充，给它们一个上边距。

Answer 3

您应该使用旧的选定区域名称保留变量

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

再次单击以关闭切换div

8 个答案: