0

我正在使用以下 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？

4

8 回答 8

4

您可以使用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);
          }  
     });
}
于 2012-10-09T14:39:29.380 回答
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>

此外，如果您的链接没有任何意义，请使用#ashref并确保默认情况下这些框可见。boxes.hide();（在开始时使用正确的隐藏它们。）

此外，<br>这不是你应该在那里使用的。<div>s 已经是块级元素。如果你想要更多的填充，给他们一个上边距。

于 2012-10-09T14:37:53.233 回答
0

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

<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=''在最后设置让选项卡重新打开。

于 2012-10-09T14:37:52.390 回答
0

试试这个：

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

这样，当您单击 div 时，它将隐藏它。

于 2012-10-09T14:38:16.427 回答
0

由于您使用的是 jQuery，您可以尝试使用jQuery.toggle函数。

function show_region(chosen_region) {
     $('#' + chosen_region).toggle('slide');
     return false;
}
于 2012-10-09T14:40:51.777 回答
0

首先，你为什么要使用这么旧的 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);​
于 2012-10-09T14:41:55.523 回答
0

跟踪您最后单击的 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");
});
于 2012-10-09T14:44:53.293 回答
0

因为您正在使用动画，所以最好跟踪当前显示的 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);
        }
    });
});​

这是一个工作示例

于 2012-10-09T14:47:25.460 回答