0

我在单击箭头形 div 时创建了两个 div，它会滑出隐藏的 div。类似于论坛上发布的小提琴之一。由于某种原因，它不起作用。

这就是我到目前为止所做的： 非常感谢Fiddel 的任何帮助。

html

<div id="slideout">
<div id="containclickme">
    <div class="metro three-d" id="click-me"></div>
</div>
</div>

css

 body {
direction:rtl;
}
#slideout {
background: #666;
position: relative;
width: 300px;
height: 80px;
right:-300px;
margin-top:50px;
top:100%;
bottom:100%;
}
.metro {
display: inline-block;
padding: 5px;
margin: 50px;
width:1px;
height:19.5px;
background: #117ebb;
color: white;
font-weight: bold;
text-decoration: none;
}
.metro.three-d {
position: relative;
box-shadow: 1px 1px #003355, 2px 2px #003355, 3px 3px #003355;
transition: all 0.1s ease-in;
}
.metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
.metro.three-d:after {
 transition: all 0.1s ease-in;
position:absolute;
top:0px;
left:-13px;
content:" ";
width: 0;
height: 2px;
border-top: 13px solid transparent;
border-bottom: 15px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
#containclickme {
background: transparent;
float:left;
height:100%;
bottom:100%;
width:20px;
margin-top:-25px;
}
#click-me {
position:right;
left:30px;
}

jQuery

 $(function () {
 $("#clickme").toggle(function () {
    $(this).parent().parent().animate({
        right: '0px'
    }, {
        queue: false,
        duration: 500
    });
 }, function () {
    $(this).parent().parent().animate({
        right: '-300px'
    }, {
        queue: false,
        duration: 500
    });
  });
 });
4

2 回答 2

2

你非常接近;)！

http://jsfiddle.net/zxu7w/

$(function () {
    // cache the sliding object in a var
    var slideout = $('#slideout');
    // "click-me" is what is in your html not "clickme"
    $("#click-me").toggle(function () {
        // use cached object instead of searching
        slideout.animate({
            right: '0px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        // use cached object instead of searching        
        slideout.animate({
            right: '-300px'
        }, {
            queue: false,
            duration: 500
        });
    });
});
于 2013-03-11T17:03:23.857 回答
0

由于您使用的 id 错误，它无法正常工作

你用过$("#clickme")

它应该是$("#click-me")

通过该更改再次检查您的代码，它会像魅力一样工作

于 2013-03-11T17:09:24.830 回答