pcguy
23.05.2015, aktualisiert am 25.05.2015
view4945
view10
0
Goto Top

Externen Link zur Collapse

gelöstFrageJavaScriptEntwicklung
Guten morgen, ich möchte mit einem externen Link eine bestimmte Bootstrap Collapse (http://holdirbootstrap.de/javascript/#collapse) öffnen.

Mein Link: index.php?page=hilfe&catid=6#15
Damit möchte ich die Collapsel mit der ID 15 öffnen.

Auf der Zielseite habe ich ein Javascript:
<script type="text/javascript">  
$( document ).ready(function() {

 if (window.location.hash) {
   var AccordionSectionNumber = window.location.hash.substring(1);
   AccordionBodyID = $(".accordion .accordion-group:nth-of-type(" + AccordionSectionNumber + ") .accordion-heading a").attr('href')  
      if (! (typeof AccordionBodyID === "undefined")) {  
        $(AccordionBodyID).collapse('show');  
        return true;
      }
    }

})
  ;
</script>

Was ist hier falsch?
Kannst mir jemand weiterhelfen?
ShareTeilen
Auf Facebook teilen Auf Twitter teilen Auf Reddit teilen Auf Linkedin teilen

Content-ID: 272766

Url: https://administrator.de/contentid/272766

Ausgedruckt am: 21.11.2024 um 22:11 Uhr

10 Kommentare
Neuester Kommentar
Goto Top
114757
114757 23.05.2015 aktualisiert um 18:12:38 Uhr
Goto Top
Moin,
back-to-topBeispiel 1:
Nicht vergessen in die URL einen random-Parameter mit einzubauen, damit der Browser die Seite nicht aus dem Cache nimmt.

Ich würde aber stattdessen die Angabe des Panels ebenfalls über einen normalen URL-Parameter übergeben, denn das Auslesen dieser geht ebenfalls mit Java-Script, siehe zweite Demo weiter unten ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Bootstrap Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />  
<script>
	$(document).ready(function(e) {
		var pos = parseInt(window.location.hash.substring(1))-1;
		if (pos >= 0){
	        $('div.panel-collapse:eq('+ pos +')').collapse('show');  
		}
    });
</script>
</head>

<body>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">  
  <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="überschriftEins">  
      <h4 class="panel-title">  
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseEins" aria-expanded="true" aria-controls"collapseEins">  
          Klappbarer Eintrag #1
        </a>
      </h4>
    </div>
    <div id="collapseEins" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftEins">  
      <div class="panel-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>
    </div>
  </div>
  <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="überschriftZwei">  
      <h4 class="panel-title">  
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseZwei" aria-expanded="false" aria-controls"collapseZwei">  
          Klappbarer Eintrag #2
        </a>
      </h4>
    </div>
    <div id="collapseZwei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftZwei">  
      <div class="panel-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>
    </div>
  </div>
  <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="überschriftDrei">  
      <h4 class="panel-title">  
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseDrei" aria-expanded="false" aria-controls"collapseDrei">  
          Klappbarer Eintrag #3
        </a>
      </h4>
    </div>
    <div id="collapseDrei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftDrei">  
      <div class="panel-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>
    </div>
  </div>
</div>
</body>
</html>

back-to-topBeispiel 2:
(hier ist dann kein Random Parameter nötig). Hier muss beim Aufruf der URL ein Parameter Namen num hinzugefügt werden, also z.B. &num=2.
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Bootstrap Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />  
<script type="text/javascript">  
function getUrlVars()
{
    var vars = , hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');  
        vars.push(hash);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
$(document).ready(function(e) {
	var arrUrlParameter = getUrlVars();
	var pos = parseInt(arrUrlParameter['num']) -1;  
	if (pos >= 0){
		$('div.panel-collapse:eq('+ pos +')').collapse('show');  
	}
});
</script>
</head>

<body>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">  
  <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="überschriftEins">  
      <h4 class="panel-title">  
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseEins" aria-expanded="true" aria-controls"collapseEins">  
          Klappbarer Eintrag #1
        </a>
      </h4>
    </div>
    <div id="collapseEins" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftEins">  
      <div class="panel-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>
    </div>
  </div>
  <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="überschriftZwei">  
      <h4 class="panel-title">  
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseZwei" aria-expanded="false" aria-controls"collapseZwei">  
          Klappbarer Eintrag #2
        </a>
      </h4>
    </div>
    <div id="collapseZwei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftZwei">  
      <div class="panel-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>
    </div>
  </div>
  <div class="panel panel-default">  
    <div class="panel-heading" role="tab" id="überschriftDrei">  
      <h4 class="panel-title">  
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseDrei" aria-expanded="false" aria-controls"collapseDrei">  
          Klappbarer Eintrag #3
        </a>
      </h4>
    </div>
    <div id="collapseDrei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftDrei">  
      <div class="panel-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>
    </div>
  </div>
</div>
<a href="#1">Expand Panel 1</a>  
<a href="#2">Expand Panel 2</a>  
<a href="#3">Expand Panel 3</a>  
</body>
</html>
Gruß jodel32
pcguy
pcguy 23.05.2015 um 18:36:10 Uhr
Goto Top
Hallo jodel32, vielen dank für Deine Lösungen!

Gibt es auch eine Lösung in der ich die Collapse über den Namen oder id ansprechen kann?
114757
114757 23.05.2015 aktualisiert um 18:39:52 Uhr
Goto Top
Zitat von @pcguy:
Gibt es auch eine Lösung in der ich die Collapse über den Namen oder id ansprechen kann?
Klar:
$('#ID_Deines_Panels').collapse('show');
im obigen Beispiel wäre das z.B.:
$('#collapseDrei').collapse('show');
pcguy
pcguy 23.05.2015 um 18:50:53 Uhr
Goto Top
Sorry, ich meinte über den externen Link.

Meine Collapsen kommen aus der DB und da kann sich bei der Reihenfolge was ändern.
Aus diesem Grund würde ich sie am liebsten über die id aufrufen.
114757
114757 23.05.2015 aktualisiert um 22:50:10 Uhr
Goto Top
Na ganz einfach die id als URL Parameter übergeben wie in Beispiel 2 mit der Nummer gemacht ist doch logisch .... schau's dir
mal genau an face-wink
Btw. wenn du sowieso schon in PHP arbeitest kannst du auch direkt die entsprechende Klasse in das DIV schreiben so das es aufgeklappt ist, da brauchst du dann nicht noch hinterher mit JavaScript zu hantieren um das zu verwirklichen !
pcguy
pcguy 24.05.2015 um 14:47:14 Uhr
Goto Top
Hallo Jodel 32, dass hatte ich Erfolglos versucht face-smile

if (!isset($_GET['num'])) { $extern='nein'; }  else { $extern='ja';}   

if ( $i== '1' & $extern=='nein' or $extern=='ja' & $_GET['num'] == $row['id']) { echo "in";}

mit $i== '1' & $extern=='nein'
prüfe ich ob es der erste Eintrag ist und kein externer Link.
oder
$extern=='ja' & $_GET['num'] == $row['id']
externer link und die id identisch wie der url Parameter....

Der Effekt war das der Code einzeln funktioniert, aber im Zusammenhang ohne URL alle Collapsen ausgeklappt.
Aus diesem Grund habe ich die Javascript Version versucht face-smile
114757
114757 24.05.2015 aktualisiert um 14:57:21 Uhr
Goto Top
Schau dir erst mal an wie man die logischen Operatoren in PHP richtig einsetzt, so kann das ja nicht funktionieren...
http://php.net/manual/de/language.operators.logical.php
pcguy
pcguy 24.05.2015 um 17:56:08 Uhr
Goto Top
Ich habe schon mehrere schreibweisen versucht, ohne Erfolg.
Liegt es an:
if ( $i== '1' & $extern=='nein' or $extern=='ja' & $_GET['num'] == $row['id']) { echo "in";} ?
114757
Lösung 114757 24.05.2015, aktualisiert am 25.05.2015 um 14:06:01 Uhr
Goto Top
Ich sag nur && dann sollte es klick machen face-wink
heart1
pcguy
pcguy 25.05.2015 um 14:08:35 Uhr
Goto Top
Hallo jodel32, vielen Dank !!!!

Ja es hat klick gemacht face-smile
Das sind die Feinheiten, an denen Anfänger scheitern.

Für alle die das selbe Problem haben:
if ( ($i== '1' && $extern=='nein') || ($extern=='ja' && $_GET['num'] == $row['id'])) { echo "in";}

So funktioniert es bei mir.
gelöstFrageJavaScriptEntwicklung
Mehr von pcguypcguyOffice 365 Geräteübergreifende Signaturpcguy - 11 KommentarepcguyIllustrator (EPS in PDF ) ohne ebenen durcheinanderpcguy - 3 KommentarepcguyWin 7 sicherheitseinstellung verhindert allespcguy - 11 KommentarepcguyUST Betrag ausgebenpcguy - 26 Kommentare
Heiß diskutiert
superfun2k24Sophos SFOS 20 DNAT funktioniert nichtsuperfun2k24 - 26 Kommentareuser217Kaufberatung Hardware - Hyper-V Cluster 3 Nodesuser217 - 25 KommentarePharaunIntel-E810 QSFP28 to Mikrotik QSPF+ mit 40Gbit VerbindungPharaun - 23 KommentarecseLaufwege erfassen in großer Hallecse - 20 Kommentareprplemk2Testumgebung bauen (Grundlegend)prplemk2 - 19 KommentareaufdemmarsHP Z620 USB hat kein Strom beim Startenaufdemmars - 17 KommentareYan2021Nachricht an mehrere PCs im Netzwerk sendenYan2021 - 17 KommentareTJ.Hooker74Dom.Admin-Passwort ändern - Auswirkungen auf EX, HCW, AADCTJ.Hooker74 - 14 KommentareJudgelgZertifikate in die Exchange Online GAL hochladenJudgelg - 13 KommentareadmtechEntwicklertagebuch: Release 6.4 - Filteradmtech - 13 KommentaremaisenkaiserSwitch ohne STP ins Netzwerkmaisenkaiser - 13 KommentareleberkaeseFB7590 ISDN Fax-Funktionleberkaese - 12 Kommentare