Javascript 如何使用jQuery切换ListItem的最后两个子项

我有一个清单项目，其中有一些孩子喜欢

  <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>

您的文本

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

---

请帮助我..

将此添加到您的文档中：

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

$（函数（）{
$（'#link1'）。单击（函数（）{
$（'#textbox1'）.toggle（）；
$（'#按钮1'）。切换（）；
});
});

请在此处查看它的实际操作：

---

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

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

$（函数（）{
$（'#link1'）。单击（函数（）{
$（'#textbox1'）.toggle（）；
$（'#按钮1'）。切换（）；
});
});

请在此处查看它的实际操作：

类似这样的内容：

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

上面假设您在每个li元素中都有类似的内容，并且您希望对所有li元素执行相同的操作-为了实现这一点，您显然需要将包含ul或ol元素的id放入我所说的

“#idOfList”

演示：

要仅对带有

id=“link1”

的特定链接执行此操作，只需将

“#idOfList li a”

选择器更改为

“#link1”

，如下所示：

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

上面假设您在每个li元素中都有类似的内容，并且您希望对所有li元素执行相同的操作-为了实现这一点，您显然需要将包含ul或ol元素的id放入我所说的

“#idOfList”

演示：

---

要仅对带有

id=“link1”

的特定链接执行此操作，只需将

“\idOfList li a”

选择器更改为

“\link1”

，您可以这样做

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

---

你可以这样做

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

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

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>​

您的文本

您的文本

​

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

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>​

您的文本

您的文本

​

---

谢谢你的帮助。。我想同时隐藏按钮和文本框。而且当再次点击时，它应该会显示..他希望能够在每次点击时将它们切换为隐藏/显示感谢您的rply。。我想同时隐藏按钮和文本框。而且当再次点击时，它应该会显示..他希望能够在每次点击时将它们切换为隐藏/显示您只需执行切片（-2）即可获得最后两个：）谢谢。。它很好用。。它只隐藏和显示最后两个孩子。你只需做切片（-2）就可以得到最后两个：）谢谢。。它很好用。。它只隐藏和显示最后两个孩子。