使用JQuery的DIV點擊

我正面臨使用JQuery進行DIV點擊的問題。需要在這個問題上提出建議。使用JQuery的DIV點擊

我在我的HTML 3種DIV元素如下，

<html> 
<body> 
<div id="overviewContainer"> 
    <div id="firstContainer"></div> 
    <div id="secondContainer"></div> 
</div> 
</body> 
</html>

我的要求是，

1）當我在firstContainer，在secondContainer單擊要消失，我firstContainer應擴大並佔用secondContainer的空間。

2）當我在再次點擊firstContainer，在secondContainer必須出現和我firstContainer應該收縮到原來的位置，留出空間secondContainer。

對於這一點，我已經寫下面jQuery代碼

$(function() { 
     var firstContainerMaximized = false; 
     alert("Jquery invoked");  
      $('#firstContainer').click(function(e) { 
       //var firstContainerMaximized = firstContainerMaximized; 
         alert("fist container clicked"); 
         if(firstContainerMaximized == false) { 
          alert("maximizing clicked"); 
          firstContainerMaximized = true; 
          $('#secondContainer').hide(); //hide the 2nd container. 
          $(this).css({ //modify the 1st container 
           "right":"1%"      
          }); 
         } else if(firstContainerMaximized == true) { 
          alert("minimizing clicked"); 
          firstContainerMaximized == false; 
          $('#secondContainer').show(); //show the 2nd container. 
          $(this).css({ //modify the 1st container 
           "right":"49%"     
          }); 
         } 
      }); 

      $('#secondContainer').click(function(e) { 
         alert("second container clicked"); 
       }); 
     });

的邏輯適用於第一2次點擊。也就是說，當我第一次單擊我的firstContainer，可變firstContainerMaximized設置爲FALSE我firstContainer擴張預期。

當我點擊firstContainer第二次，變量firstContainerMaximized被設置爲TRUE，我firstContainer收縮預期。

但是，當我在firstContainer從第3次點擊開始，可變firstContainerMaximized始終設置爲TRUE 。它沒有像預期的那樣再次擴大。

請提醒我哪裏錯了？

有沒有其他的設計可以滿足我的要求？

來源

2014-10-04 sivajsx

在else if：check the second「firstContainerMaximized == false;」這是一個有條件的，不設置值 – kellycode 2014-10-04 11:11:40

@ kellycode好，你有犀利的眼睛。我錯過了它。你爲什麼不回答？ – 2014-10-04 11:12:45

哦..很抱歉..感謝kellycode – sivajsx 2014-10-04 12:15:16

，如果你使用jQuery .bind（）和控制通過添加和刪除了「擴展的內容」會更容易和更清潔。

類

所以，你最終會得到這樣的事情

HTML

<body> 
<div id="overviewContainer"> 
    <div id="firstContainer">first container</div> 
    <div id="secondContainer">second container</div> 
</div> 
</body>

CSS

#firstContainer{ 
    background: orange; 
    padding: 20px; 
    height: 50%; 
} 
#secondContainer{ 
    background: green; 
    padding:20px; 
    height: 50%; 
} 
#overviewContainer{ 
    background: red; 
    height: 200px; 
} 
#firstContainer.maximized{ 
    height:100%; 
}

JAVASCRIPT

$('#firstContainer').bind('click',function(e) { 
    var $firstContainer = $(this); 
    var $secondContainer = $('#secondContainer'); 
    var $firstContainerMaximized = $('#firstContainer.maximized'); 
    if($firstContainerMaximized.length == 0) {       
     $secondContainer.hide(); //hide the 2nd container. 
     $firstContainer.addClass('maximized'); 
    } else { 
     $secondContainer.show(); //show the 2nd container. 
     $firstContainer.removeClass('maximized'); 
    } 
}); 
$('#secondContainer').click(function(e) { 
    alert("second container clicked"); 
});

這裏也a link與小提琴的工作代碼。我決定添加一些css讓它更容易看到。

ps：JavaScript仍然可以簡化。

我希望它有幫助:)

來源

2014-10-04 14:24:30 leandroxbr

正如指出的@kellycode，你是不是使用賦值運算符=，而不是你使用條件運算==，其計算結果爲true或false

因此，更改firstContainerMaximized == false;到firstContainerMaximized = false;

來源

2014-10-04 11:19:32

這是因爲您沒有正確設置firstContainerMaximized變量。改正這一點，它會起作用。

問題：firstContainerMaximized == false;
解決方法：firstContainerMaximized = false;

來源

2014-10-04 11:41:14 Shikhar

使用JQuery的DIV點擊

回答

相關問題