Ein zweiter Klick, um ein Umschalt-Div zu schließen

Sie sollten eine Variable mit Ihrem alten gewählten Regionsnamen behalten

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

Auf diese Weise können Sie sich merken, welche Region Sie zuletzt ausgewählt haben, und wenn die ausgewählte der letzten entspricht, schließen Sie sie.

Sie sollten am Ende old_chosen_region='' festlegen, damit die Registerkarte wieder geöffnet wird.

Da Sie eine Animation verwenden, ist es am besten, den aktuell angezeigten Div zu verfolgen. Wenn Sie dies nicht tun, werden mehrere Divs angezeigt, wenn Sie schnell hintereinander auf Links klicken.

Sie können dies verwenden:

$(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);
        }
    });
});​

Hier ist ein Arbeitsbeispiel

Versuche dies:

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

Auf diese Weise wird es ausgeblendet, wenn Sie auf ein Div klicken.

Erstens, warum verwenden Sie eine so alte Version von jQuery?

Zweitens kann Ihr JavaScript vereinfacht werden. jQuery arbeitet an Sets. Sie benötigen weder .each noch Schleifen.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/gibble/25P9z/

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

Neues 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);
}

Zuletzt Ereignisse anhängen, nicht in HTML einbinden.

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

Da Sie jQuery verwenden, können Sie versuchen, die Funktion jQuery.toggle zu verwenden.

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

Verwenden Sie zunächst keine Inline-Ereignishandler.

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

Wenn Ihre Links nicht sinnvoll sind, verwenden Sie # als href und stellen Sie sicher, dass die Felder standardmäßig sichtbar sind. (Verstecke sie gleich zu Beginn mit boxes.hide();.)

Außerdem ist <br> nicht das, was Sie dort verwenden sollten. <div> sind bereits Elemente auf Blockebene. Wenn Sie mehr Polsterung wünschen, geben Sie ihnen einen oberen Rand.

Behalten Sie den Überblick über den Div, auf den Sie zuletzt geklickt haben:

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");
});