JQuery нажмите меню - PullRequest
Новая
       34

JQuery нажмите меню

6 голосов
/ 22 декабря 2011

Я работаю над этим меню:

enter image description here

HTML: 

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->

<ul class="submenu submenu-1">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->

<div class="hero hero-1">content</div>
<div class="hero hero-2">content</div>
<div class="hero hero-3">content</div>
<div class="hero hero-4">content</div>

JQuery: 

$('#menu li a').click(function () {
    $('#menu li').removeClass('active');
    $('.submenu, .hero').slideDown('normal');
});
$('.submenu, .hero').hide();

... в данный момент отображаются ВСЕ подменю и герои. Что я хочу, так это ... если это ПЕРВЫЙ li из #menu, он должен искать подменю-1, hero-1 и slidingown.

Я бы очень признателен за любую помощь.

Спасибо!

Ответы [ 3 ]

2 голосов
/ 22 декабря 2011

Добавление атрибута данных к исходным элементам a.( рабочий образец - поскольку CSS не был предоставлен, стили не совсем правильные, но вы поняли). 

<ul id="menu">
    <li><a href="#" data-slide="1">Item 1</a></li>
    <li><a href="#" data-slide="2">Item 2</a></li>
    <li><a href="#" data-slide="3">Item 3</a></li>
    <li><a href="#" data-slide="4">Item 4</a></li>
</ul><!-- end #menu -->

Тогда ваш JS может извлечь этот идентификатор, чтобы показатьправильные связанные подменю и содержимое. 

$('#menu li a').click(function () {

    //Fetch the value of the 'slide' data attribute of the clicked link
    var id = $(this).data('slide'); 

    $('.submenu, .hero').hide();
    $('#menu li').removeClass('active');
    $('.submenu-'+id+', .hero-'+id).slideDown('normal');

});
$('.submenu, .hero').hide();

Преимущество использования этого метода по сравнению с некоторыми другими упомянутыми методами (например, .eq() или .index()) заключается в том, что вы можете изменить порядок заказа.оригинальных пунктов меню, и это не будет отбрасывать, какой элемент контента извлекается.Так что этот HTML все равно будет работать отлично ... 

<ul id="menu">
    <li><a href="#" data-slide="3">Item 3</a></li>
    <li><a href="#" data-slide="1">Item 1</a></li>
    <li><a href="#" data-slide="4">Item 4</a></li>
    <li><a href="#" data-slide="2">Item 2</a></li>
</ul><!-- end #menu -->
1 голос
/ 22 декабря 2011

DEMO

Для этого: 

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->

<ul class="submenu submenu-1">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
    <li><a href="#">Item 2.1</a></li>
    <li><a href="#">Item 2.2</a></li>
    <li><a href="#">Item 2.3</a></li>
    <li><a href="#">Item 2.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->

<div class="hero hero-1">content 1</div>
<div class="hero hero-2">content 2</div>
<div class="hero hero-3">content 3</div>
<div class="hero hero-4">content 4</div>

Используйте этот jQuery: 

$('#menu li a').click(function () {
    var index = $('#menu li a').index(this) + 1;
    $('.submenu, .hero').hide();
    $('#menu li').removeClass('active');
    $('.submenu-' + index + ', .hero-' + index).slideDown('normal');
});
$('.submenu, .hero').hide();

И проверить jQuery.index()

1 голос
/ 22 декабря 2011

Вы можете использовать jQuery .index() и .eq(), как в этой скрипке: http://jsfiddle.net/bUjud/1/
См .: http://api.jquery.com/eq/ и http://api.jquery.com/index/

...