jQuery只能用於懸停

Question

我有一個關於jQuery的問題。

請參閱代碼：

$(document).ready(function() { 
    $(".button").hover(function() { 
     $('.div1').animate({width: '200px'}); 
    }, function() { 
     $('.div1').animate({width: '100px'}); 
    }); 
}); 

基本上它是這樣的：當用戶將鼠標懸停股利 - 它的寬度上升至200像素。當用戶移開鼠標時，寬度恢復正常。

我想知道爲什麼這不與.click工作？

Answer 1

你可以把它像這樣:)

$(document).ready(function() { 
 

 
    $(".button").on('click', function() { 
 
    var toggleWidth = $(".div1").width() == 100 ? 200 : 100; 
 
    $('.div1').animate({ 
 
     width: toggleWidth 
 
    }); 
 
    }); 
 
    
 
});

.div1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="div1"></div> 
 

 

 
<button class="button">Click</button>

Answer 2

請驗證碼：

<h1>Mouse Click</h1> 
    <ul class="mouseClick"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
     <li>9</li> 
    </ul> 

     function ShowLi() { 
     $(this).css("color", "red"); 
     return false; 
    } 


    $('.mouseClick li').click(ShowLi); 

Fiddle

Answer 3

與

類實現

$(".button").on("click" , function() { 

     if(!$(this).hasClass("clikedButton")){ 
      $('.div1').animate({width: '200px'}); 
      $(this).addClass("clikedButton"); 
     } 
     else{ 
      $('.div1').animate({width: '100px'}); 
      $(this).removeClass("clikedButton") 
     } 
}); 

Fiddle

Answer 4

.hover是不是在jQuery的事件，這是一個捷徑。基本上，它就像寫

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

曾經有過那樣的快捷與.toggle(handler1, handler2).click但它已被棄用，刪除。

您需要使用一個標誌。我更喜歡在數據對象中插入該標誌。剛做這樣的事情：

$(document).ready(function() { 
    $(".button").click(function() { 
     var $this = $(this); 
     $this.data("click_toggle", !$this.data("click_toggle")); 
     $('.div1').animate({width: $this.data("click_toggle") ? '200px' : '100px'}); 
    } 
}); 

Fiddle

---

標誌也可以是您切換與toggleClass和檢查元素與.hasClass類的類。

$(".button").click(function() { 
    var $this = $(this); 
    $this.toggleClass('active'); 
    $('.div1').animate({width: $this.hasClass("active") ? '200px' : '100px'}); 
}); 

Fiddle

---

最後，你可以使用CSS動畫。你只需切換類，並使用CSS來動畫寬度。根據儘管在你的標記，你可能需要使用不同的DOM遍歷方法，但在這裏一個例子：

HTML

<div class="div1"></div> 


<button class="button">Click</button> 

JS

$(".button").click(function() { 
    $(this).prev().toggleClass('active'); 
    //If you have a single div1, you can use $('.div1').toggleClass('active'); 
}); 

CSS

.div1{ 

    width:100px; 
    background:green; 
    border:1px solid red; 
    height:100px; 
    -webkit-transition : all 0.5s; 
    -moz-transition : all 0.5s; 
    -o-transition : all 0.5s; 
    transition : all 0.5s; 
} 

.div1.active{ 
    width : 200px; 
} 

Fiddle