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