Question

我对jQuery有疑问。

请参阅代码：

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

基本上它的作用是：当用户悬停div时 - 它的宽度达到200px。当用户将鼠标移开时，宽度会恢复正常。

我想知道为什么不能使用.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

用class

实现

$(".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 3

请检查此代码：

<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 4

.hover不是jQuery中的事件，它是一种捷径。基本上，这就像写作

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

.click过去常常使用.toggle(handler1, handler2)这种快捷方式，但已被弃用并删除。

你需要使用一个标志。我更喜欢在数据对象中插入该标志。做这样的事情：

$(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

jQuery只适用于悬停

4 个答案: