Question

我的列表项目中有一些孩子喜欢..

  <li id="li1">Your Text 
      <a id="link1" href="#">click to enter</a>
      <input type="text" id="textbox1" value=""/>
      <input type="button" id="button1" value="Edit" />
   </li>

我想在点击链接时隐藏并显示文本框和按钮..

请帮助我..

Answer 1

你可以这样做

$('#link1').click(function(){
    $('#li1').children().slice(-2).toggle();
});

Live Demo

Answer 2

这样的事情：

$(document).ready(function() {
    $("#idOfList li a").click(function(e) {
        e.preventDefault();
        $(this).siblings().toggle();
    });
});

以上假设你在每个li元素中都有类似的东西，并且你想对所有这些元素执行相同的操作 - 为了使你工作，显然将id包含在ul或ol元素中＃39; ve说"#idOfList"。

演示：http://jsfiddle.net/nnnnnn/j8NrE/

要为id="link1"的特定链接执行仅，只需将"#idOfList li a"选择器更改为"#link1"。

Answer 3

通过使用jQuery .siblings()和.slideToggle()方法，您可以通过以下代码行轻松实现：

jQuery：

$(".list-item a").on("click", function(event){           
    $(this).siblings().slideToggle();
    event.preventDefault();    
});

<强> HTML：

<ul>
    <li class="list-item">Your Text 
        <a id="link1" href="#">clike to enter</a>
        <input type="text" id="textbox1" value=""/>
        <input type="button" id="button1" value="Edit" />
    </li>

    <li class="list-item">Your Text 
        <a id="link2" href="#">clike to enter</a>
        <input type="text" id="textbox2" value=""/>
        <input type="button" id="button2" value="Edit" />
    </li>
</ul>

SEE DEMO

Answer 4

将此内容添加到您的文档中：

<script type="text/javascript">
    $(function () {
        $('#link1').click(function () {
            $('#textbox1').toggle();
            $('#button1').toggle();
        });
    });
</script>

请在此处查看：

http://jsfiddle.net/LC7LT/2/

如何使用jQuery切换ListItem的最后两个子节点

4 个答案:

SEE DEMO