Ich verwende die folgende jQuery zum Ausblenden und Anzeigen von Inhalten (Umschalten) als Baumnavigationsmenü auf meiner Website. Ich fand diesen Code äußerst nützlich, da durch Klicken nur jeweils ein Div angezeigt wird.

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

Das Problem ist, dass ich ein Div nur schließen kann, indem ich ein anderes Div öffne.

Wie schließe ich das Div durch einen zweiten Klick darauf?

0
blsn 9 Okt. 2012 im 18:30

8 Antworten

Beste Antwort

Sie können slideToggle verwenden und von slideDown zu slideToggle wechseln:

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);
          }  
     });
}
4
Mihai Iorga 9 Okt. 2012 im 14:39

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.

0
Gabber 9 Okt. 2012 im 19:18

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

0
musefan 9 Okt. 2012 im 14:47

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.

0
NinJoel 9 Okt. 2012 im 14:38

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);​
0
Ry- 9 Okt. 2012 im 14:47

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;
}
0
Blake Simpson 9 Okt. 2012 im 14:40

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.

2
Ry- 9 Okt. 2012 im 14:51

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");
});
0
Laoujin 9 Okt. 2012 im 14:44