关于slidetoggle的信息

本文目录一览：

• 1、jquery鼠标点击事件是什么？
• 2、在jQuery中显示和隐藏HTML元素的方法分别是什么？
• 3、jQuery中slidetoggle()这个动作是从上至下的，如何让它从左至右展开？
• 4、jquery怎么实现从右到左滑出来的效果？
• 5、jquery 如何实现折叠菜单
• 6、Jquery slidetoggle问题，如何让一个DIV隐藏一半？

jquery鼠标点击事件是什么？

定义和用法：

当点击元素时，会发生 click 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

1、click事件：点击鼠标左键时触发

$('p').click(function(){});

示例：

123 $('p').click(function(){        alert('click function is running !');       });

2、dbclick事件：迅速连续的两次点击时触发

$('p').dbclick(function(){});

示例：

123 $("button").dblclick(function(){ $("p").slidetoggle();});

3、mousedown事件：按下鼠标时触发

$('p').mousedown(function(){});

示例

123 $("button").mousedown(function(){ $("p").slidetoggle();});

4、mouseup事件：松开鼠标时触发

$('p').mouseup(function(){});

示例：

123 $("button").mouseup(function(){ $("p").slidetoggle();});

5、mouseover事件：鼠标从一个元素移入另一个元素时触发

mouseout事件：鼠标移出元素时触发

$('p').mouseover(function(){});

$('p').mouseout(function(){});

示例：

123456 $("p").mouseover(function(){ $("p").css("background-color","yellow");});$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4");});

6、mouseenter事件：鼠标移入元素时触发

mouseleave事件：鼠标移出元素时触发

$('p').mouseenter(function(){});

$('p').mouseleave(function(){});

示例

123456 $("p").mouseenter(function(){ $("p").css("background-color","yellow");});$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});

7、hover事件

$('p').hover(

function(){},

function(){}

);

示例

123456789 $(".table_list tr").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

8、toggle事件：鼠标点击切换事件

$('p').toggle(

function(){},

function(){}

);

示例

12345678 $("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");}

在jQuery中显示和隐藏HTML元素的方法分别是什么？

显示：

$('选择器').show()

或者$('选择器').slideShow()

隐藏：

$('选择器').hide()

或者$('选择器').slideHide()

显示/隐藏 切换

$('选择器').toggle()

或者$('选择器').slidetoggle()

jQuery中slidetoggle()这个动作是从上至下的，如何让它从左至右展开？

没有从左往右的API，但是可以用animate来写

style

#aa{width:200px;height:200px;overflow:hidden;background-color:#000;}

/style

div

id="aa"dddddd/div

a

href="javascript:alr();"点击测试/a

//引入jquery.js

script

var

aa=$("#aa");

var

is_on=true;//默认是展开的

var

aw=aa.width();//获取aa的宽度用于还原

function

alr(){

if(is_on){

aa.stop().animate({width:"0px"},300);

}else{

aa.stop().animate({width:aw},300);

}

}

/script

slide效果本身原理也是通过倒计时来逐渐改变元素的高度来做的。所以同理也可以做左右的

jquery怎么实现从右到左滑出来的效果？

引入jquery.js，复制以下代码，即可运行

1，style type="text/css"

2，.slide {

3，position: relative;

4，height: 200;

5，lightyellow;

6，}

7 ，

8，.slide .inner {

9，position: absolute;

10，left: 0;

11，bottom: 0;

12，height: 100;

13，lightblue; ,

14，width: 100%

15，}

16，/style

1、slidetoggle() 交替slidedown(),slideup()

Html代码

div id="slidebottom" class="slide" 

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$('#slidebottom button').click(function() {

$(this).next().slidetoggle();

});

2、左侧横向交替滑动 Animate Left

Html代码

div id="slidewidth" class="slide"

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$("#slidewidth button").click(function(){

$(this).next().animate({width: 'toggle'});

});

3、左侧横向交替滑动 Animate Left Margin （非隐藏）

Html代码

div id="slideleft" class="slide" style="width: 50%;float: right"

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$("#slideleft button").click(function(){

var $lefty = $(this).next();

$lefty.animate({

left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0

});

});

4、右侧横向滑动Slide to right

Html代码

div id="slidemarginleft" class="slide" style="width: 60%;float: left"

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$("#slidemarginleft button").click(function(){

var $marginlefty = $(this).next();

$marginlefty.animate({

marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0

});

});

jquery 如何实现折叠菜单

知道你要啥样的，就说个最简单的竖列折叠菜单吧,比如：

菜单1

子菜单1

子菜单2

……

菜单2

子菜单1

子菜单2

……

如果要做这样的折叠菜单 那html为：

div class="menu"

    div菜单1/div

    ul

        li子菜单1/li

        li子菜单2/li

        ……

    /ul

/div

div class="menu"

    div菜单1/div

    ul

        li子菜单1/li

        li子菜单2/li

        ……

    /ul

/div

css为：(没样式只有功能，样式自己去加)

.menu ul{ display:none}

js为：

$('.menu').click(function(){

    $(this).find('ul').slidetoggle();

)}

Jquery slidetoggle问题，如何让一个DIV隐藏一半？

如果只是想让他隐藏一半的话那就不能用slidetoggle事件了，你可以写好css，控制好想要操作的父标签的高度，然后溢出隐藏，接着用animate事件控制定位的距离就好了。具体代码如下：

HTML：

div style="height:200px; overflow:hidden; position:relative;"

div class="img" style="position:absolute;"想要隐藏一半的标签/div

/div

jq：

$(function(){

$(".img").animate({"top":"100px"}); //这是下半部分隐藏，具体的根据自己的需求修改

})

关于slidetoggle和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。