divを表示/非表示に切り替え

私は基本的な高度な検索divで次のマークアップをしています。divを表示/非表示に切り替え

<div class="form"> 
    <form> 
     <input type="text" name="first_name"> 
     <input type="text" name="last_name"> 

     <div id="Basic" class="slide"> 
     <input type="text" name="location"> 
     </div> 

     <a onclick="ShowDiv('Adv');">+ show advanced fields</a> 

     <div id="Adv" class="slide hidden"> 
     <input type="text" name="first_name2"> 
     <input type="text" name="last_name2"> 
     <input type="text" name="street"> 
     <input type="text" name="town"> 
     <input type="text" name="country"> 
     </div> 
    </form> 

    <a onclick="ShowDiv('Basic');">- hide advanced fields</a> 
    </div>

トグルは、結果ページからページにユーザーが戻るが、彼はいずれかを完了したと仮定した場合ADV div要素を示して、私はまた場所でtrhe次のjQueryを持って

function HideDiv() { 
     $('.slide').hide(); 
    } 
    function ShowDiv(ctrl) { 
     HideDiv(); 
     $('#' + ctrl).show(); 
    } 
    ShowDiv('Basic');

次のスクリプトで達成されます最初に検索フォームの入力フィールドを入力してください

//show adv div based on input value data 
$(function(){ 
    if($("#Adv input[value!='']").length) 
     $('#Adv').show(); // if this is the element you want to show. 
});

両方のリンクを使用する必要はありません。私は状態に応じて1つだけのリンクを持つ必要があります。したがって、div basicがデフォルトとして表示されている場合、リンクはshow advancedと表示されます。アドバンスが表示されると、アンカーリンクが非表示に切り替わります。

jQueryを編集してマークアップする必要があります。この例では

出典

2012-03-23 gek

$(function(){ 
    $(".toggler").click(function(e) { 
     e.preventDefault(); 
     $(this).find("span").toggle(); 
     $(".togglee").slideToggle(); 
    }); 

    //show adv div based on input value data 
    if($("#Adv input[value!='']").length) { 
     $('.toggler').click(); // if this is the element you want to show. 
    } 

});

そしてHTML：

<html> 
    <body> 
     <div class="form"> 
      <form> 
       <input type="text" name="first_name"> 
       <input type="text" name="last_name"> 

       <div class="Basic togglee" class="slide"> 
        <input type="text" name="location"> 
       </div> 

       <div id="Adv" class="slide hidden togglee"> 
        <input type="text" name="first_name2"> 
        <input type="text" name="last_name2"> 
        <input type="text" name="street"> 
        <input type="text" name="town"> 
        <input type="text" name="country"> 
       </div> 
      </form> 

      <a class="toggle-link toggler"> 
       <span>+ show advanced fields</span> 
       <span class="hidden">- hide advanced fields</span> 
      </a> 

     </div> 
    </body> 
</html>

jsFiddle例here。

出典

2012-03-23 11:31:00 bububaba

が好きです。しかし、それはIE9で拡大しない – gek

奇妙な、ロケット科学はここにありません。エラーメッセージはありますか？私はIE8しか持っていないので、チェックできません。 – bububaba

私はそれが今、感謝、恐らくキャッシュの問題だったと思う。 – gek

HTML

<a class="toggle-link" href="#Adv" >toggle advanced fields</a>

$('.toggle-link').on('click.toggle', function(evt) { 
    var tgt = $($(this).attr('href')); /* tgt = $("#Adv") */ 
    evt.preventDefault(); 

    if (tgt.length) { /* if $("#Adv") exists */ 
     $(this).toggleClass(".expanded"); /* add or remove this class for the link */ 
     tgt.toggleClass(".hidden"); /* add or remove this class in the target element */ 
    } 
});

CSS

.toggle-link:before { content: "+"; padding-right: 1em; } 
.toggle-link.expanded:before { content: "-"; }

、非表示にする要素に関する情報/ショーはhref属性と一緒に渡され、そしてイベントハンドラはインラインではないので、同じ関数を複数回呼び出すことは避けてください。スクリプトとマークアップを一緒にします。

例のフィドルを参照してください：http://jsfiddle.net/SnKHg/

出典

2012-03-23 11:24:55 fcalderan

で見ている必要がありかもしれません。私はそれが好きですが、現時点では切り替えることはありません – gek

私の更新をフィドルで見てください:) – fcalderan

なぜ私のページでうまくいかないのか分かりません。競合する可能性のある既存のスクリプトを表示しようとしています。私はあなたの解決策が本当に好きです。 – gek

この機能は勿論良く作られたことができますが、これを行うための一つの方法です。

リンクを作成<a href="#" class="show adv">Click</a>

jQuery関数はクラスを切り替え、したがって機能を切り替えます。

$('a.show').click(function(e) { 
    e.preventDefault(); 
    if($(this).hasClass('basic')) 
    { 
     ('#adv').hide(); 
     ('#basic').show(); 
     $(this).addClass('adv'); 
     $(this).removeClass('basic'); 
    } 
    else if($(this).hasClass('adv')) 
    { 
     ('#basic').hide(); 
     ('#adv').show(); 
     $(this).addClass('basic'); 
     $(this).removeClass('adv'); 
    }   
});

しかし、表示する/表示したくないコンテナが多い場合は、jQuery UIアクセラレーションが適しています。

あなたが行うことができ

出典

2012-03-23 11:25:10

$("a.toggle").click(function() { 
    $(this).closest('div.form').find("#Adv").toggle(); 
    $(this).toggleClass("hide"); 
    if ($(this).hasClass("hide")) { 
     $(this).text("hide advanced fields"); 
    } else { 
     $(this).text("show advanced fields"); 
    } 


});

HTMLここ

<div class="form"> 
<form> 
    <input type="text" name="first_name"> 
    <input type="text" name="last_name"> 

    <div class="Basic" class="slide"> 
    <input type="text" name="location"> 
    </div> 

    <div id="Adv" class="slide hidden"> 
    <input type="text" name="first_name2"> 
    <input type="text" name="last_name2"> 
    <input type="text" name="street"> 
    <input type="text" name="town"> 
    <input type="text" name="country" value="gh"> 
    </div> 
</form> 

<a class='toggle'>show advanced fields</a> 
</div>

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

出典

2012-03-23 11:26:40

以下を見つけます。

<div class="form"> 
    <form> 
     <input type="text" name="first_name"> 
     <input type="text" name="last_name"> 

     <div class="Basic" class="slide"> 
     <input type="text" name="location"> 
     </div> 

     <a class="toggle-link" onclick="ShowHideDiv();" id='bttn'>+ show advanced fields</a> 

     <div id="Adv" class="slide hidden"> 
     <input type="text" name="first_name2"> 
     <input type="text" name="last_name2"> 
     <input type="text" name="street"> 
     <input type="text" name="town"> 
     <input type="text" name="country"> 
     </div> 
    </form> 


    </div>

私はjavascriptの部分も変更しました。他の回答に加えて

function Hide() { 
      $('.slide').hide(); 
     } 

    function Show() { 

     $('.slide').show(); 
    } 
     function ShowHideDiv() { 

      var str = $("#bttn").text(); 
      if(str === '+ show advanced fields'){ 

      $("#bttn").text('- hide advanced fields'); 
      Show(); 

      } 
      else { 
       $("#bttn").text('+ show advanced fields'); 
      Hide(); 

      } 

     }

出典

2012-03-23 11:32:07 scartag

、uはいくつかのアニメーションをしたいならば、uは私はほとんど何を探していますどのようなことは、このhttp://jqueryui.com/demos/toggle/#option-options

出典

2012-03-23 11:33:35 cjmling

divを表示/非表示に切り替え

答えて

関連する問題