Detailed explanation on the use of toggle and hover in jQuery

This article focuses on introducing you to the usage methods and examples of the two functions hover and toggle in jQuery. It is very simple and practical, and is recommended to friends for reference.

jQuery provides some methods (such as: toggle) to combine the effects of two events , such as: mouseover, mouseout; keyup, keydown, etc.

1, hover function

hover(over,out) A method that simulates a hover event (the mouse moves to an object and moves out of the object). This is a custom method that provides a "keep in it" state for frequently used tasks.
Parameters:
over (Function): The function to be triggered when the mouse moves over the element.
out (Function): The function to be triggered when the mouse moves out of the element.

<script type="text/
javascript
">
$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show();// 鼠标悬浮时触发
    },function(){
        $(this).next().hide();// 鼠标离开时触发
    })
})
</script>

2. toggle function

toggle(fn,fn) switches the function to be called every time it is clicked. If a matching element is clicked, the first function specified is triggered, and when the same element is clicked again, the second function specified is triggered. Each subsequent click repeats the call to these two functions in turn. You can use unbind("click") to delete.

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show();// 第一次点击时触发
    },function(){
        $(this).next().hide();// 第二次点击时触发，之后不停的切换
    })
})
</script>

toggle() method switches the visible state of an element.
If the selected elements are visible, then hide these elements. If the selected elements are hidden, then display these elements. The toggle() method switches the visible state of an element.
If the selected elements are visible, then hide these elements. If the selected elements are hidden, then display these elements.

So the above code can also be written as:

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().toggle();
    },function(){
         $(this).next().toggle();
    })
})
/*$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().toggle();
    })
})*/
</script>

You can also add some css styles:

<style type="text/css">
.highlight{ 
background
:#FF3300; }
</style>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){//配合css样式使用
        $(this).addClass("highlight");
        $(this).next().show();
    },function(){
        $(this).removeClass("highlight");
        $(this).next().hide();
    });
})
</script>

The above is the detailed content of Detailed explanation on the use of toggle and hover in jQuery. For more information, please follow other related articles on the PHP Chinese website!