0

実際、私は jQuery を初めて使用し、jQuery 関数を使用してサンプル ページを作成しています。このページではトグル機能を利用しています。意図した効果を得るために私を助けてください。私はそれを取得しようとしていますが、正しく機能していません。私が適用しようとしている効果は次のとおりです。

  1. ページには、Button1 と Button2 という 2 つのボタンがあります。
  2. Div1 と Div2 の 2 つの Div があります。
  3. 最初は両方の Div が非表示で、2 つのボタンのみが表示されます。
  4. Button1 をクリックすると、Div1 がトグル ダウンし、その逆も同様です。
  5. Div1 を開いた状態で Button2 をクリックすると、Div1 が少し上がり、Div2 が下がるはずです。

CSSを適用したコードを書いています。しかし、Divが1つしかないため、スライド効果が得られません。

私はJavascriptを次のように書いています。

var IsPanelDown = false;
var IsPanel2Down = false;

$(document).ready(function() {

 // Expand Panel
 $("#open").click(function(){
 if (IsPanel2Down == false)
 {
     $("div#panel2").slideUp("slow");
     IsPanel2Down = false; 
 }
  $("div#panel").slideDown("slow");
     IsPanelDown = true;
 }); 

 // Collapse Panel
 $("#close").click(function(){
  $("div#panel").slideUp("slow"); 
  IsPanelDown = false;
 });  

 // Switch buttons from "Log In | Register" to "Close Panel" on click
 $("#toggle a").click(function () {
  $("#toggle a").toggle();
 });  

  $("#toggle2 a").click(function () {
  $("#toggle2 a").toggle();
 });  

 $("#open1").click(function(){
 if(IsPanelDown == false)
 {

  $("div#panel").slideUp("slow"); 
  IsPanelDown = false;
 }
  $("div#panel2").slideDown("slow");
     IsPanel2Down = true;
 }); 

 // Collapse Panel
 $("#close1").click(function(){
  $("div#panel2").slideUp("slow"); 
  IsPanel2Down = false;
 });  
});
4

4 に答える 4

0

テストされていませんが、このようなものを試してください

<div id="toggle_holder">
  <div class="toggle"></div>
  <div class="toggle"></div>
</div>
<div id="button_wrapper">
  <button>button 1</button>
  <button>button 2</button>
</div>
<script type="text/javascript">
  // jquery already loaded...
  $(document).ready(function(){
    $('#button_wrapper button').click(function(){
      $('button', $(this).parent()).slideUp('slow');
      $(this).stop().slideDown('slow');
    });
  });
</script>
于 2009-12-02T16:04:23.067 に答える
0

これと同様のマークアップがあると仮定します。

<button id="button1">Toggle Div1</button>
<button id="button2">Toggle Div2</button>

<div class="container" id="div1">Content in DIV 1</div>
<div class="container" id="div2">Content in DIV 2</div>

次に、次のようにjQueryを使用します。

$('button').click(function(e) {
  // get the ID of the button so we can work out which DIV to show
  var m = $(this),
      id = m.attr('id').replace('button', ''); // should be either "1" or "2" after this

  // hide the DIV that's visible, if any
  $('.container:visible').slideUp('fast');

  // slide the one we want down
  $('#div' + id).slideDown('fast');
});

これを行う方法はたくさんあります-それはあなたのマークアップに依存します！

于 2011-07-23T10:43:21.643 に答える
0

私もjqueryに慣れていないのですが、ライブプロパティを使用した場合は、次のように役立ちます。

$("#toggle a").live('click', function() { $(this).functionName(); });
于 2009-12-02T15:51:35.987 に答える
0

SlideUp / SlideDownは、位置ではなく、可視性を制御します。CSSまたはドキュメント構造を使用して、2つのDIVが表示されているときの相対的な位置を制御します。

于 2009-12-02T15:52:57.300 に答える