Понимание того, как взаимодействовать с плагинами меню ul li - PullRequest
1 голос
/ 11 сентября 2010

Я пытаюсь разработать плагин меню jquery, основанный на тегах UL и LI.

это действительно базовый плагин:

(function($){
$.fn.extend( {
    verticalfade: function(options){

        var defaults = {
            speed: 'normal'
        };
        var options = $.extend(defaults, options);

        return this.each(function(){
            $(this).css('cursor', 'pointer');
        });
    }    
});
})(jQuery);

Теперь я хотел бы связать, чтобы понять, как определитьфункция щелчка для элемента li, и как использовать .addClass (), .removeClass () и .mouseover () над элементами li, особенно как добавить класс в LI, над которым я закончил, и одновременно удалитькласс от всех остальных li.

это простая HTML-голова

<script src="javascript/jquery.verticalfade.js" type="text/javascript"></script>
<link rel="stylesheet" href="verticalfade.css" />
<script type="text/javascript">
<!--
// jquery initialize:
    $(function() {
        $('#verticalfade').verticalfade();
    });
//console.log();
-->

и это тело

<ul id="verticalfade">
   <li>First</li>
   <li>Second</li>
   <li>Thirs</li>
</ul>

в то время как css

.outText{color:#cccccc;}
.inText{color:#ffffff;}

Я мог бы связать все ли для получения класса .outText, в то время как перемычка li только для .inText

Спасибо!

1 Ответ

1 голос
/ 11 сентября 2010

Это простая демонстрация, но вы должны получить точку.

$('li').live('mouseover', function() {
    var t = this;
    $('li').each(function() {
        if (this != t) $(this).removeClass('bold');
        else $(this).addClass('bold');
    });

в действии : http://jsfiddle.net/zdpZU/

РЕДАКТИРОВАТЬ

Учитывая ваше обновление, вы, вероятно, захотите что-то более похожее на

$('ul#verticalfade li').live('mouseover', function() {
    var t = this;
    $('ul#verticalfade li').each(function() {
        if (this != t) $(this).removeClass('inText');
        else $(this).addClass('inText');
    });
}).live('mouseout',function(){ $(this).removeClass('inText'); });​

в действии : http://jsfiddle.net/9ecLW/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...