0

サイトに表示と非表示の機能を組み込みましたここをクリック- [作業] タブをクリックし、[お問い合わせ] タブをクリックして、div非表示を非表示にするトリガーが思い通りに機能しないことに気付きました。たとえば、[作業] タブをクリックすると、[お問い合わせ] タブをクリックすると、作業用の非表示の div が閉じられ、その逆も同様です。誰も私がこれを達成する方法を知っていますか?

ここに私のHTMLがあります：

 <ul class="nav-bar">
 <li><a class="show_hide" href="#">work</a></li>
 <li><a class="show_hide-2" href="#">contact us</a></li>
 </ul>

ここに私のJSがあります

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $(".slidingDiv-2").hide();
    $(".slidingDiv").slideToggle();
       });


$(".slidingDiv-2").hide();
$(".show_hide-2").show();
$('.show_hide-2').click(function(){
$(".slidingDiv").hide();
$(".slidingDiv-2").slideToggle();
 });
 });

また、display:none; を追加しました。show_hide と show_hide-2 に変更しましたが、サイトを読み込んだときにまだわずかなアニメーションが残っています。これを回避する方法はありますか?

4

2 に答える 2

2

次のように変更します。

$('.show_hide').click(function(){
    $(".slidingDiv-2").hide();
    $(".slidingDiv").slideToggle();
});

と

$('.show_hide-2').click(function(){
    $(".slidingDiv").hide();
    $(".slidingDiv-2").slideToggle();
});

の CSS (または HTML のインライン) を設定して、ページの読み込み時に Javascript が有効になる前にdivをdisplay:none;非表示にすることができます。div

于 2012-11-12T11:38:27.263 に答える
0

タグがたくさんある場合は、正規表現を使用できます。

$(document).ready(function(){

 $('[class^=slidingDiv]').hide();
 $('[class^=show_hide]').show();

 $('[class^=show_hide]').click(function(){
  $('[class^=slidingDiv]').hide();
  $(this).closest('[class^=slidingDiv]').slideToggle();
 });

});
于 2012-11-12T11:40:32.373 に答える