1

これは私の現在のコードであり、すでに1時間以上解決しようとしています:

$('#menu_list').bind('mouseenter mouseleave click', function(event){
    if(event.type == 'click') {
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
        $('#add_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/add_inactive.png)');
        $('#search_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/search_inactive.png)');
        $('#list_text').css('color', 'black');
        $('#add_text').css('color', '#C0C0C0');
        $('#search_text').css('color', '#C0C0C0');
    } else if(event.type == 'mouseenter') {
        $('#list_text').css('color', 'black');
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)');
    } else if(event.type == 'mouseleave') {
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_inactive.png)');
    }
});

それがすべきことは、ホバーするとアイコンが変わることです。しかし、クリックすると、別のアイテムをクリックするまでアイコンはアクティブのままになります。mouseenter/mouseleave は問題ありません。問題はクリックから始まります。クリックするとジョブが実行されますが、マウスを移動すると、mouseleave 機能がアクティブになります。アイコンが再び非アクティブになることを意味します。

4

4 に答える 4

1

まず第一に、なぜこれをjQueryでそれほど複雑にしているのですか？cssクラスベースのシステムを使用してみませんか。

あなたのCSSをこのようにしてください（あなたが必要とするように明らかにこれを変更してください;）

.normal { color:#000; background-image: url(foo.jpg) }
.click { color:#2B2B2B; background-image: url(foo.jpg) }
.mouseIn { color:#F00; background-image: url(foo.jpg) }
.mouseOut { color:#FFF; background-image: url(foo.jpg) }

次に、jQueryを使用します

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

   $('#list_img').addClass("click");
   $('#add_text').addClass("example");
});

$('#menu_list').mouseenter(function() {

   $('#list_img').addClass("mouseIn");

});

$('#menu_list').mouseleave(function() {

   $('#list_img').addClass("mouseOut");

});

クラスも削除する必要があると思いますか？addClassと呼ばれるの反対を使用できますremoveClass。これらを上記の関数内に配置します

于 2012-07-24T08:34:53.693 に答える
1

まず第一に、これらのイベントを分離し、3 つの個別のイベント ハンドラを作成することを保守性のためにお勧めします。

第二に、何list_clickedですか？変数はスコープ外のように見えるため、未定義であり、常に true になります。代わりに要素のクラスを確認してください。これは簡単です...

3 番目: これらすべてのスタイルをいくつかの css クラスに入れます (たとえばactive、clicked私の例では)。これにより、全体が非常に簡単になります。そのようなものはうまくいくはずです：

$('#menu_list').click(function() {
   /* alternate the classes by clicking - the class "clicked" is there to indicate 
     that it has been activated by click and won't be removed by mouseout*/
   $(this).toggleClass("active clicked");
});

$('#menu_list').mouseenter(function() {
   /* Just add the "active" class */
   $(this).addClass("active");
});

$('#menu_list').mouseleave(function() {
   /* If the element has not been clicked...*/
   if (!$(this).hasClass("clicked")){
      /*...remove the "active" class */
      $(this).removeClass("active");
   }
});

CSS クラスは次のようになります。

.active #list_img{
    background-image:url(<?=base_url()?>/assets/css/images/list_active.png);
}
.active #list_text{
    color:black;
}
于 2012-07-24T08:36:16.570 に答える
0

手始めに、クリックハンドラーで設定されていないように見える変数list_clickedをチェックしています。これは、！list_clickedが常にtrueを返すことを意味します...したがって、役に立たない場合があります。

于 2012-07-24T08:34:58.970 に答える
0 
var activeItem;
$('#menu_list').bind('mouseenter mouseleave click', function(event){ 
    if(event.type == 'click') { 
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)'); 
        $('#add_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/add_inactive.png)'); 
        $('#search_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/search_inactive.png)'); 
        $('#list_text').css('color', 'black'); 
        $('#add_text').css('color', '#C0C0C0'); 
        $('#search_text').css('color', '#C0C0C0');
        activeItem = this;          
    } else if(event.type == 'mouseenter') { 
        $('#list_text').css('color', 'black'); 
        $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_active.png)'); 
    } else if(event.type == 'mouseleave' && !list_clicked) {
        if(activeItem != this) {        
            $('#list_img').css('background-image', 'url(<?=base_url()?>/assets/css/images/list_inactive.png)'); 
        }
    } 
});

アクティブなアイテムを追跡するだけです。

于 2012-07-24T08:37:35.540 に答える