Question

我需要在click函数中添加else语句，以便在第二次单击该按钮时.container消失。

function() {

    $('div.container').css({'width':'350px'});

    } else {

    $('div.container').css({'width':'0'});

     }

});

修改

我需要元素在点击按钮时向左滑动。

Answer 1

toggle（）方法：

使用jQuery，您可以使用toggle()方法。

toggle（）方法在hide（）和show（）之间切换所选元素。

所以你可以简单地拥有

＆＃13;

$('#buttonId').on('click', function(){
    $('#container').toggle();
})

＆＃13;

div{
  background-color: #a8a8ff;
  height: 100px;
  width: 350px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container" class="long"></div>

＆＃13;

toggleClass（）方法：

根据您的评论，如果您想切换样式（例如：宽度），为您的样式定义一个类并使用toggleClass()方法会更好更清晰。

toggleClass（）方法在添加和删除类之间切换。

＆＃13;

$('#buttonId').on('click', function(){
    $('#container').toggleClass('long short');
})

＆＃13;

div{
  background-color: #a8a8ff;
  height: 100px;
}

.long{
  width: 350px;
}

.short{
  width: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container" class="long"></short>

＆＃13;

animate（）方法：

根据您的第二个推荐，您可以使用animate()方法来模拟幻灯片功能。

jQuery animate（）方法可让您创建自定义动画。

要将元素向左滑动:(对JQGeek的回复here。

＆＃13;

$('#buttonId').on('click', function(){
    $('#container').animate({width:'toggle'},350);
})

＆＃13;

div{
  background-color: #a8a8ff;
  height: 100px;
  width: 350px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container"></div>

＆＃13;

Answer 2

你可以这样做

$(document).on('click', 'button_selector', function () {
    if (true) {
        // your code
    }
    else{
        // your code
    }
});

建议

您可以使用此功能切换

$(document).on('click', 'button_selector', function () {
    $('div.container').toggle();
});

Answer 3

您可以关注我的代码

$(function(){
   var firstClick = 0;
   $("button").click(function(){
       firstClick++;
       if(firstClick==2)
          $('div.container').hide();
       else
         $('div.container').show();
   });
})

如何水平滑动元素

3 个答案: