Использование jQuery для отображения / скрытия элементов списка - PullRequest
Новая
       10

Использование jQuery для отображения / скрытия элементов списка

1 голос
/ 03 августа 2010

Все это код здесь: http://jsfiddle.net/yrgK8/

У меня есть раздел "новости", который состоит из следующего: 

<ul id="news">

      <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li>
      <li><p><a href="http://google.com">google.com link</a</p></li>                   
 </ul>                          
                <div id="newsNav">
                    <span id="newsRight"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsleft.png" alt="&gt;" /></a></span>
                    <span id="newsLeft"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsright.png" alt="&lt;" /></a></span>
                </div><!-- /#newsNav -->

И у меня есть следующий код CSS(просто, просто в значительной степени накладываем li друг на друга с абсолютным позиционированием): 

ul#news { list-style-type: none; position:relative; height:101px; color: black; }
ul#news > li { font-size: 11px; margin: 10px; margin-right: 15px; position: absolute; top: 0; right:0; opacity: 0; filter:alpha(opacity=0);  color: black; }

И, наконец, это код jQuery, который делает все это возможным.По сути, он анимирует непрозрачность одного LI до 0, а затем анимирует непрозрачность следующего LI до 1. 

$('ul#news li:first').addClass('active').addClass('firstNews');

$('ul#news > li').css({opacity:0.0}).filter('ul#news  li.firstNews').css({opacity:1.0});
$('#newsLeft').click(function() {

    var $active = $('ul#news li.active');
    var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews');

        $active.animate({opacity:0.0}, 300, function() {
            //when done animating out, animate next in
            $next.css({opacity:0.0})
                .animate({opacity: 1.0}, 400, function() {
                $active.removeClass('active');
                $next.addClass('active');
        });
    });

    return false; 
}); //clickRight

$('#newsRight').click(function() {

    var $active = $('ul#news li.active');
    var $previous = $active.prev().length ? $active.prev() : $('ul#news li.firstNews');

        $active.animate({opacity:0.0}, 300, function() {
            //when done animating out, animate next in
            $previous.css({opacity:0.0})
                .animate({opacity: 1.0}, 400, function() {
                $active.removeClass('active');
                $previous.addClass('active');
        });
    });

    return false; 
}); //clickRight

Так в чем же проблема?Проблема в том, что они сложены друг на друга.Это работает, если LI содержат только текст.Однако некоторые из них содержат ссылки.Это становится проблемой, когда есть LI с непрозрачностью 0, который сложен поверх вашего LI с непрозрачностью 1 и который содержит ссылку.Вы не можете нажать на ссылку.

Кто-нибудь знает, как я могу это исправить?

Большое спасибо,

Amit

Ответы [ 3 ]

2 голосов
/ 03 августа 2010

Я думаю, что установка display:none в конце перехода решит вашу проблему.

Однако кажется, что было бы лучше использовать встроенную в jQuery .fadeOut () , поскольку это будет обрабатывать непрозрачность, а также установить display на none.

Если вы не хотите использовать это, вы должны установить display на none самостоятельно, используяCSS.

2 голосов
/ 03 августа 2010

Установите для z-index активного элемента какое-то высокое значение, чтобы оно было выше их всех, и ссылки больше не должны быть проблемой.

0 голосов
/ 03 августа 2010

Попробуйте установить z-индекс элемента li одновременно с настройкой непрозрачности.

...