Я создаю панель навигации с динамической фильтрацией для использования с элементами изотопов в моем документе. У меня есть несколько разных категорий в моей навигации, каждая из которых имеет относительные подкатегории. Я пытаюсь создать навигацию, в которой основные категории отображаются при загрузке.
При загрузке я также заполняю DOM всеми элементами в случайном порядке. Когда вы нажимаете на ссылку категории, она фильтрует результаты и упорядочивает относительные элементы. Я также хочу показать относительные подкатегории в отфильтрованном разделе. Затем, если вы выберете другую категорию, существующая вложенная навигация исчезнет, а относительная вложенная навигация появится.
Вся моя сортировка и все, что касается изотопов, отлично работает. Это интеллектуальное отображение / скрытие вспомогательной навигации, с которым мне трудно.
Мой HTML:
<nav id="filters">
<div id="categories">
<h2>Select a Category:</h2>
<br>
<li><a href="#" data-filter="*">All Categories</a></li>
<li><a href="#" data-filter=".autos" data-category="autos">Autos</a></li>
<li><a href="#" data-filter=".lifestyle" data-category="lifestyle">Lifestyle</a></li>
<li><a href="#" data-filter=".people" data-category="people">People</a></li>
<li><a href="#" data-filter=".tech" data-category="tech">Tech</a></li>
<li><a href="#" data-filter=".trends" data-category="trends">Trends</a></li>
<br>
</div>
<div id="autos">
<h2>Autos:</h2>
<li><a href="#" data-filter=".autos" data-category="autos">Show All</a></li>
<li><a href="#" data-filter=".news" data-category="autos">News</a></li>
<li><a href="#" data-filter=".car-tech" data-category="autos">Car Tech</a></li>
<li><a href="#" data-filter=".fuel-economy-and-safety" data-category="autos">Fuel Economy & Safety</a></li>
<li><a href="#" data-filter=".buying-and-selling" data-category="autos">Buying & Selling</a></li>
<li><a href="#" data-filter=".autos, .everything-else" data-category="autos">Everything Else</a></li>
<br>
</div>
<div id="lifestyle">
<h2>Lifestyle:</h2>
<li><a href="#" data-filter=".lifestyle" data-category="lifestyle">Show All</a></li>
<li><a href="#" data-filter=".travel" data-category="lifestyle">Travel</a></li>
<li><a href="#" data-filter=".music" data-category="lifestyle">Music</a></li>
<li><a href="#" data-filter=".food" data-category="lifestyle">Food</a></li>
<li><a href="#" data-filter=".shopping" data-category="lifestyle">Shopping</a></li>
<li><a href="#" data-filter=".lifestyle, .everything-else" data-category="lifestyle">Everything Else</a></li>
<br>
</div>
<div id="people">
<h2>People:</h2>
<li><a href="#" data-filter=".people" data-category="people">Show All</a></li>
<li><a href="#" data-filter=".who-you-know" data-category="people">Who You Know</a></li>
<li><a href="#" data-filter=".who-you-should-know" data-category="people">Who You Should Know</a></li>
<li><a href="#" data-filter=".people, .everyone-else" data-category="people">Everyone Else</a></li>
<br>
</div>
<div id="tech">
<h2>Tech:</h2>
<li><a href="#" data-filter=".tech" data-category="tech">Show All</a></li>
<li><a href="#" data-filter=".business" data-category="tech">Business</a></li>
<li><a href="#" data-filter=".pleasure" data-category="tech">Pleasure</a></li>
<li><a href="#" data-filter=".tech, .everything-else" data-category="tech">Everything Else</a></li>
<br>
</div>
<div id="trends">
<h2>Trends:</h2>
<li><a href="#" data-filter=".trends" data-category="trends">Show All</a></li>
<li><a href="#" data-filter=".online" data-category="trends">Online</a></li>
<li><a href="#" data-filter=".offline" data-category="trends">Offline</a></li>
<li><a href="#" data-filter=".trends, .everything-else" data-category="trends">Everything Else</a></li>
</div>
</nav>
Мой jQuery:
$(document).ready(function() {
$('#filters > div:gt(0)').hide();
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
var category = $(this).attr('data-category');
var $subnav = $('#filters').find('#'+category);
if($subnav.is(":hidden")) {
$subnav.fadeIn();
}
if($subnav.is(":visible") && $subnav.attr("id") != category) {
}
$container.isotope({ filter: selector });
return false;
});
});
Я открыт для любых предложений. Будь то реструктуризация моей навигации или переобъявление моих переменных по-новому. Я какое-то время смотрю на этот блок кода, и мозг превращается в кашу. Я пытался использовать второй оператор if
для сокрытия неотносительной поднавигации.
Если вам нравится, вы можете перейти на мой сайт с примером на дисплее: