Ich habe ein Menü, das Elemente auflisten, die den Inhalt auf der anderen Liste anzeigen.display none wenn null mit Daten-ID
MENU
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9426"><strong>item 2</strong></li>
<li data-id="9488"><strong>item 3</strong></li>
<li data-id="9489"><strong>item 4</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
INHALT:
<ul id="gallery-container">
<li data-id="9425">
<h3 style="display: none;">Item 1</h3>
<div class="content">Content here</div>
</li>
<li data-id="9426">
<h3 style="display: none;">Item 2</h3>
</li>
<li data-id="9488">
<h3 style="display: none;">Item 3</h3>
</li>
<li data-id="9489">
<h3 style="display: none;">Item 4</h3>
</li>
<li data-id="9495">
<h3 style="display: none;">Item 5</h3>
<div class="content">Content here</div>
</li>
<li data-id="9427">
<h3 style="display: none;">Item 6</h3>
<div class="content">Content here</div>
</li>
</ul>
Im Inhalt haben einige .content
im li
. Wie kann ich die Daten-ID verwenden, um das Element im Menübereich auszublenden? Grundsätzlich Elemente im Menü sollten nur sehen sein, wenn es eine .content
Ausgabe des Menüs hat, soll so sein.
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
Oder das sollte auch in Ordnung sein.
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9425" style="display:none;"><strong>item 2</strong></li>
<li data-id="9425" style="display:none;"><strong>item 3</strong></li>
<li data-id="9425" style="display:none;"><strong>item 4</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
Nehmen Sie nicht, dass die Artikel in den Inhalt sind immer display:none;
onload Trigger.
Sie sich auch dieses Skript:
$("#gallery-list li").click(function() {
var id = $(this).data('id');
$("#gallery-container").find('li').each(function() {
$(this).find('.content').toggle($(this).data('id') === id);
$(this).find('h3').toggle($(this).data('id') === id);
});
});
window.onload = function() {
$("#gallery-container li .content").css("display", "none");
$("#gallery-container li h3").css("display","none");
$("#gallery-container li p").css("display","none");
}
$('.gallery-menu h3, #gallery-list li').click(function(){
$("#gallery-list, .gallery-menu h3").toggle();
});
Dies wird der Inhalt der Liste steuert auch das Menü aktivieren.
Erbsenzählerei: 'window.onload = function() {...}' sollte sein '$ (Fenster) .load (function() {...})', oder Sie überschreibt möglicherweise andere Onload-Ereignisse (jQuery erlaubt mehrere Ereignisbehandlungsroutinen auf diese Weise). Auch wenn Sie mit 'Toggle()' sollten Sie 'hide()' und 'show()' für Konsistenz anstatt 'css ('display', '...')' –
danken Ihnen für zu bemerken, dass @ XerenNarcy – MIke