0

のような子供がいるリストアイテムを持っています。

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

リンクをクリックしたときにテキストボックスとボタンを非表示にして表示したい。

私を助けてください..

4

4 に答える 4

2

あなたはこのようにそれを行うことができます

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

ライブデモ

于 2012-08-30T04:30:40.553 に答える
1

このようなもの：

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

上記は、各li要素に類似したものがあり、それらすべてに対して同じアクションを実行することを前提としています。これを機能させるには、私が言ったulまたはol要素を含むIDを明らかにします"#idOfList"。

デモ： http： //jsfiddle.net/nnnnnn/j8NrE/

セレクターをに変更するだけで、特定のリンクに対してのみそれを行うことができます。id="link1""#idOfList li a""#link1"

于 2012-08-30T04:27:59.330 に答える
1

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

デモを見る

于 2012-08-30T04:37:37.917 に答える
0

これをドキュメントに追加します。

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

ここで実際の動作を確認してください。

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

于 2012-08-30T04:26:07.097 に答える