1

折りたたみ可能なタブとトグル+/-ボタンを備えたアコーディオンNAVセットアップがあります。

'タブ'DIVをクリック可能にしようとしています。コードの一部に次の関数を追加し、repedititive toggle（）関数を削除しましたが、それでも正しく機能していません-

更新しました

$('.tabs').click(function() {
    }
)

私のHTML

<div id="tab1" class="tabs">NEWS [<a href="#" class="button" id="plus1">more</a>]</div>
<div class="expandable" id="one">
<p>This is placeholder text.</p></div>

<div id="tab2" class="tabs">EVENTS [<a href="#" class="button" id="plus2">more</a>]</div>
<div class="expandable" id="two">
<p>This is placeholder text.</p></div>

そして私のJavaScript

$(window).load(function(){
$(document).ready(function(){

$(".expandable").hide();
$(".button").show();

$('.tabs').click(function() {  // added new

  $('.button').toggle(function(){
      $(".expandable").slideDown(
        function(){
          $(".button").text("less")
        }
      );
  },function(){
      $(".expandable").slideUp(
      function(){
          $(".button").text("more")
      }
      );
  });

}); // end of click
});

});

もともとはタブごとにtoggle（）関数を使って設定していましたが、そうしないように言われました。私はJS構文に苦労しているので、この時点でどこに行けばいいのかわかりません。

人々に感謝します。

4

1 に答える 1

0

あなたの場合、複数のトグル関数を作成するの$('#plus1').toggle $('#plus2').toggleではなく、それらにクラスを割り当てて作成します$('.plus').toggle。これにより、コードが最小化され、効率的 (保守可能) になります。使用
方法の詳細については、スライドのトグルの例
を参照してください 。対処方法の良い例を示します。このトグル機能で。使用方法についてのアイデアが得られます。問題がある場合は、投稿してください:)

更新
クリック可能にする必要がある DIV にクラスを割り当てます (たとえばtabs)
JS でこのコードを記述します 

$(document).ready(function() {
    $('.tabs').click(function() {
      alert('the div is clicked');
      alert($(this).html());  // This is nothing but the content of clicked DIV
    });
});

編集済み

$(document).ready(function() {
  $('.expandable').hide();
});

またはスタイルシートを与える

<style type="text/css">
.expandable {
  display: none;
}
</style>
于 2013-02-13T04:18:42.623 に答える