jQuery - 點擊切換div類

不，這不是一個簡單直接的切換問題。我知道toggle（）函數以及如何簡單地隱藏/顯示div。想象一下，一個盒子內的標籤：jQuery - 點擊切換div類

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

當你點擊整個DIV的任何地方，它應該刪除hidden類。該框然後看起來擴大。現在該框不屬於hidden類，它不應該是可點擊的。

相反，當您單擊div.section-legend時，它應該再次將類hidden添加到主div。很顯然，圖例的點擊事件需要停止傳播（）。現在，傳說不能再點擊了，你必須再次點擊整個div才能打開它。

我不能得到任何正常工作，而且我知道這是愚蠢的代碼：

$(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'); 
     }); 
    });

}）;

來源

2011-08-02 BadHorsie

人越來越慵懶總是想一個jsfiddle .. – Ben

是一個div.hidden仍然可見不知何故？我不知道它是如何意味着如果它真的「隱藏」 – Ben

這不是真隱，'hidden'是類塌陷部分的只是名字是寂靜的點擊。還有一些其他代碼意味着它更有意義，但在這裏我可以看到它看起來很混亂。 – BadHorsie

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

這是假設section-legend與'hidden state'中的容器一樣大。

編輯：改變了一些代碼，解決辦法是這樣的：

$('.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/

來源

2011-08-02 11:43:25 Willem

不，'section-legend'不能填滿整個容器，這就是問題所在。這只是大箱子，當你展開它（即無級'hidden'），其被移動到盒的頂部內的標籤。 – BadHorsie

好吧，我更新應解決這個問題，看到的jsfiddle演示 – Willem

知府，謝謝。 – BadHorsie

首先添加的格onclick事件需要點擊：

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

而且該JavaScript添加到HTML

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

    } 
</script>

來源

2011-08-02 11:44:20 Pieter888

對不起，這是不是真的好代碼和/或jQuery的。 – BadHorsie

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

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

來源

2011-08-02 11:51:05 sje397

jQuery - 點擊切換div類

回答

相關問題