jQuery从底部元素向上和向下滑动

时间:2014-07-03 05:47:01

标签: jquery

当我使用jQuery添加第二个链接打开另一个元素时,向上和向下滑块不起作用。我不知道如何在jQuery代码中添加另一个元素。

<script type="text/javascript">
    jQuery(function( $ ){

        // Get a reference to the container.
        var container = $( "#container" );


        // Bind the link to toggle the slide.
        $( "a" ).click(
        function( event ){
            // Prevent the default event.
            event.preventDefault();

            // Toggle the slide based on its current
            // visibility.
            if (container.is( ":visible" )){

                // Hide - slide up.
                container.slideUp( 1000 );

            } else {

                // Show - slide down.
                container.slideDown( 1000 );

            }
        });
    });
</script>

页面为http://tinyurl.com/pksro4z

1 个答案:

答案 0 :(得分:0)

首先,您学习jquery selector-w3cjquery selector link,用于通过id或css或tag找到正确的对象,例如查找对象。

你遇到了上述问题,原因是你给了锚标记点击。所以它适用于所有锚。

$( "a" ).click(...

您需要为所有锚点

提供ID
<a id="ashowWithSlidown" href="#">Show Div With SlideDown()</a>
<a id="ashow" href="#">Show Div</a>

现在点击每个ID,如

$( "#ashowWithSlidown" ).click(function( event ){ alert('this is "ashowWithSlidown"') ;});

and 

$( "#ashow" ).click(function( event ){ alert('this is "ashow"') 
; });

同样更改高度类

#container {
    bottom: 0;
    height: 151px;
    left: 0;
    position: fixed;
    width: 100%;
}