Question

以下是我所得到的：jsFiddle demo

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div class="wrap_demo">
 <input type="button" class="click" value="click" onClick="function" />
</div>
<div class="wrap_demo">
 <input type="button" class="click" value="click" onClick="function" />
</div>
<div class="wrap_demo">
 <input type="button" class="click" value="click" onClick="function" />
</div>
<script>
$(document).ready(function(){
    $( ".click" ).click(function() {
       if($(".wrap_demo").height()==50)
        $(".wrap_demo").animate({height: '300px'});
        else  $(".wrap_demo").animate({height: '50px'});
    });
});

的CSS：

 .wrap_demo{
width:300px;
height:50px;
border:1px solid black;
float:left;
margin-top:20px;
position:relative;
}

.click{
display:block;
width:40px;
height:40px;
background:white;
border-radius:50%;
border:1px solid black;
position:absolute;
top:5px;
left:170px;
font-size:12px;
line-height:30px;
text-align:center;
cursor:pointer;
}
.click:focus{
outline:none;
}

我想点击按钮＆＃34;点击＆＃34;然后jquery函数只打开wrap_demo是按钮的父亲点击我点击。函数jquery如何仅动画1个父wrap_demo？

Answer 1

您可以使用$(this)定位已点击的当前按钮以及.parent()或.closest()，以仅获取所点击按钮的父.wrap_demo：

$(document).ready(function(){
    $( ".click" ).click(function() {
       var wrap_demo = $(this).closest(".wrap_demo"); // or $(this).parent();
       if(wrap_demo.height()==50)
        wrap_demo.animate({height: '300px'});
        else wrap_demo.animate({height: '50px'});
    });
});

请注意，由于您已经应用了onClick，因此您不需要在此处使用内联.click()事件处理程序，因此请将其删除。

另一方面注意，您可以直接从jsFiddle添加jQuery，而不是使用<script>标记从Frameworks & Extensions标签中选择jquery版本

<强> Updated Fiddle

Answer 2

试试这个

$(function(){
 $( ".click" ).click(function() {
           if($(this).parent(".wrap_demo").height()==50)
            $(this).parent(".wrap_demo").animate({height: '300px'});
            else  $(this).parent(".wrap_demo").animate({height: '50px'});
        });
});

<强> DEMO HERE

Answer 3

试试这个

<html>
<head>
<style>
.wrap_demo{
    width:300px;
    height:50px;
    border:1px solid black;
    float:left;
    margin-top:20px;
    position:relative;
}
.click{
    display:block;
    width:40px;
    height:40px;
    background:white;
    border-radius:50%;
    border:1px solid black;
    position:absolute;
    top:5px;
    left:170px;
    font-size:12px;
    line-height:30px;
    text-align:center;
    cursor:pointer;
}
.click:focus{outline:none;}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap_demo">
<input type="button" class="click" value="click" />
</div>
<div class="wrap_demo">
    <input type="button" class="click" value="click" />
</div>
<div class="wrap_demo">
    <input type="button" class="click" value="click" />
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".click").click(function() {
            $('.wrap_demo').height(50).removeClass('toggled');
            var parent = $(this).closest('.wrap_demo');
            if($(parent).hasClass('toggled'))
            {
                $(parent).stop().animate({"height": "50px"});
                $(parent).removeClass('toggled');
            }
            else
            {
                $(parent).stop().animate({"height": "300px"});
                $(parent).addClass('toggled');
            }
        });
    });
</script>
</body>
</html>

函数点击jquery申请多个元素？

3 个答案: