javascript - 如何使用 jQuery 切换 ListItem 的最后两个孩子

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

现场演示

Answer 2

像这样的东西：

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

以上假设您在每个 li 元素中都有类似的内容，并且您希望对所有这些元素执行相同的操作 - 为了使其正常工作，您显然会将 id 从包含的 ul 或 ol 元素放在我说过的地方"#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>​

看演示

Answer 4

将此添加到您的文档中：

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

在这里查看它的实际效果：

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