2016-05-29 16 views
1

Ich habe folgenden Code Dies druckt Filter in Magento Ich möchte Filter anzeigen/verbergen. Dies druckt oft Knopf -> ol Filter Taste -> ol aus Filtern. Ich will das machen: Wenn ich auf den Knopf klicke, will ich nur den ersten ol nach dem Knopf um zu zeigen oder zu verstecken. Ich brauche Hilfe, danke!JQUERY erstes Element nach jeder Taste

+0

Entfernen Sie 'PHP' Code und nur HTML-Ergebnis schreiben. – Mohammad

Antwort

1

Verwenden next() Methode sofort folgendes wählen

$('button').click(function() { 
 
    $(this) 
 
    .next() // get immediately next sibling 
 
    .toggle(); // toggle the visible states 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol>

+0

Danke, diese Arbeit aber wie kann ich auch nach dem 2. Klick verstecken. –

+0

@ ИванЖелев: Verwenden Sie toggle, aktualisiert –

1

Als Alternative Geschwister mit jQuery next() Sie können auch Buttons und Ol Paare von Div-Tags wickeln. Auf diese Art und Weise, wenn Sie etwas Markup zwischen Button und Ol JS-Code hinzufügen müssen, funktioniert es immer noch.

<div class="filters-box"> 
    <button>...</button> 
    <ol>...</ol> 
</div> 

Dann Click-Ereignis wie folgt hinzu:

Ein wenig mehr Code, aber es ist elastischer in Not zu verlängern. Eine solche Umhüllung kann auch zum Positionieren von Elementen nützlich sein. Es ist eine Sache des Falles, keine berüchtigten "Divits" daraus zu machen.

Verwandte Themen