Question

我在点击箭头形状的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
    });
  });
 });

Answer 1

你很亲密;）！

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
        });
    });
});

Answer 2

因为您使用的ID错误而无法正常工作

您使用了$("#clickme")

应为$("#click-me")

再次使用该更改检查您的代码，它将像魅力一样工作

通过单击另一个div滑出div

2 个答案: