2011-08-02 16 views
1

いいえ、これは単純なトグルの質問ではありません。私はtoggle()関数とdivを表示/非表示する方法を知っています。内側のラベルと箱を想像して:あなたは全体のdiv上の任意の場所をクリックすると、それはクラスhiddenを削除する必要がありますjQuery - クリック時にdivクラスを切り替える

<div class="section hidden"> 
    <div class="section-legend">My Section</div> 
</div> 

。ボックスは拡大表示されます。ボックスはクラスhiddenではないので、クリック可能ではありません。

代わりにをクリックすると、クラスhiddenがメインdivに再度追加されます。明らかに、凡例のclickイベントはstopPropagation()を必要とします。凡例をもうクリック可能にしてはいけません。もう一度凡例をクリックすると、その欄全体をクリックして開く必要があります。

私が正しく動作するために何かを得ることができない、と私は、これは愚かなコードを知っている:

$(document).ready(function() { 

    $('.section.hidden').click(function() { 
     $(this).removeClass('hidden'); 
     $(this).find('.section-legend').click(function(e) { 
      $(this).parent().addClass('hidden'); 
      e.stopPropagation(); 
     }); 
    }); 

    $('.section-legend').click(function(e) { 
     $(this).parent().addClass('hidden'); 
     e.stopPropagation(); 
     $(this).parent().click(function() { 
      $(this).removeClass('hidden'); 
     }); 
    }); 

});

+0

人々は常に望んで怠惰になっているHTMLにこのJavaScriptを追加しますjsfiddle .. – Ben

+0

は何とかdiv.hiddenが表示されますか?私はそれが本当に「隠されている」場合、それがクリック可能であることがどういう意味かわかりません。 – Ben

+0

本当に隠されていません。隠された部分は、折りたたまれたセクションのクラスの名前です。それが意味をなさないことを意味するいくつかの他のコードがありますが、ここで私はそれがどのように混乱しているかを見ることができます。 – BadHorsie

答えて

1
$('.section-legend').live('click',function(){ 
    $(this).parent().toggleClass('hidden'); 
}); 

これはセクション凡例が '隠し状態'のコンテナと同じ大きさであると仮定しています。

EDIT:解決策はこれです、いくつかのコードを変更:

$('.section').live('click',function(){ 
    $(this).removeClass('hidden'); 
}); 
$('.section-legend').live('click',function(){ 
    $(this).parent().toggleClass('hidden'); return false; 
}); 

return falseはトリックをしました! デモ:http://jsfiddle.net/RUfN7/2/

+0

いいえ、 'section-legend'はコンテナ全体を埋めるわけではありませんが、それは問題です。これは、大きなボックスの内側のラベルで、ボックスを展開するとボックスの上部に移動します(つまり、クラスが非表示になっていない)。 – BadHorsie

+0

大丈夫、私の更新は、それを修正する必要があります、jsfiddleデモを参照 – Willem

+0

長官、ありがとうございます。 – BadHorsie

1

最初にクリックする必要がdiv要素のonclickイベントを追加:

<div id="myDiv" class="section hidden"> 
    <div class="section-legend" onclick="function1();">My Section</div> 
</div> 

をそして

<script language="JavaScript"> 
    function function1(){ 
     document.getElementById("myDiv").removeAttribute("class"); 

    } 
</script> 
+1

申し訳ありませんが、これは本当に良いコードやjQueryではありません。 – BadHorsie

1
$('.section').click(function() { 
    $(this).removeClass('hidden'); 
}); 

$('.section-legend').click(function(e) { 
    var $parent = $(this).parent(); 
    if(!$parent.hasClass('hidden')) { 
     $parent.addClass('hidden'); 
     return false; 
    } 
}); 
関連する問題