2

私はJqueryが初めてで、これについて理解できません。

押されたときに検索ボックスを左にスライドさせたい検索アイコンがありますが、頭を丸めることはできません。そこに役立つチュートリアルはありますか、誰かが私のJqueryで何が間違っているのか教えてもらえますか?

ありがとう

HTML:

<div id="search-container">
    <div class="search-bar">
        <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''">                   
    </div>
    <button type="submit" name="ctl00$btnSearch" value="Go" id="ctl00_btnSearch" class="searchbutton search-bg show"></button>                       
</div>

Jクエリ

$(document).ready(function() {
   $('#search-container input').click(function() {
   $(this).next().slideToggle();
  });
});
4

2 に答える 2

3

以下のコードをチェックしてください。

HTML

<div id="search">
<img src="https://cdn0.iconfinder.com/data/icons/strabo/24/magnifying_glass.png" class="trigger"/> 
    <div class="search-bar">
    <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''"/>           
</div>
</div>

JavaScript:

$(document).ready(function() {
    $('#search .trigger').click(function(){
        $('.search-bar').animate({width: 'toggle'},1500);
    });
});

CSS:

.search-bar{ width: 200;overflow:hidden; }
.trigger{cursor:pointer;}

フィドル: http://jsfiddle.net/FdEC5/

于 2013-08-09T13:18:45.750 に答える