使用$（本）中的if語句

我試圖做一個手風琴與3個板，所以當我點擊面板上的內容應該會出現，當我再次點擊它的內容應該消失

這裏是jQuery代碼

jQuery(".item").click(function() { 

    if (jQuery(".content").css("display") == "block") 
    { 
     jQuery(this).css("display", "none"); 
    } 

    else if (jQuery(".content").css("display") == "none") 
    { 
     jQuery(this).css("display", "block"); 
    } 
}

但這裏的問題是，的jQuery（這）這裏指的是類「.item」當然，並且點擊時整個面板消失。

所以我想引用「內容」使僅正在單擊要顯示或不面板的內容。

這是HTML代碼：

<div class="container"> 
    <div calss="row"> 
     <div class="accordion"> 

      <div class="item"> 
       <div class="content"></div> 
      </div> 

      <div class="item"> 
       <div class="content"></div> 
      </div> 

      <div class="item"> 
       <div class="content"></div> 
      </div> 

     </div> 
    </div> 
</div>

我想這

jQuery(".item").click(function() { 

    if (jQuery(".content").css("display") == "block") 
    { 
     jQuery(".content").css("display", "none"); 
    } 

    else if (jQuery(".content").css("display") == "none") 
    { 
     jQuery(".content").css("display", "block"); 
    } 
}

但隨後點擊時，所有的3個面板的內容顯示/ disapear。任何建議，將不勝感激

來源

2016-04-29 Tarek Mostafa

分享你的'html'代碼。 –

沒有任何相應的HTML標記就很難提供幫助。具有「item」類的元素和具有「content」類的元素之間的關係是什麼？它們是嵌套的嗎？你可以使用$（this）.find（「。content」）來查找嵌套元素嗎？ – phtrivier

對不起，我添加了HTML代碼 –

如果您通過this第二個參數jQuery，它會發現.content在this內。像這樣：

jQuery(".item").click(function() { 

    if (jQuery(".content", this).css("display") == "block") 
    { 
     jQuery(".content", this).css("display", "none"); 
    } 

    else if (jQuery(".content", this).css("display") == "none") 
    { 
     jQuery(".content", this).css("display", "block"); 
    } 
})

你的點擊處理是查找與選擇的元素，所以通過this將限制範圍，找到隱藏元素/節目。

要優化此代碼，請嘗試存儲到變量中，因爲調用jQuery/$()會很貴，尤其是如果您需要在處理程序內多次訪問該元素。您可以使用toggle函數將其狀態從可見狀態切換到隱藏狀態，反之亦然。

jQuery(".item").click(function() { 

    jQuery(".content", this).toggle(); 
});

來源

2016-04-29 08:51:22 MacMac

正確的答案，但OP可能更好，只需使用'.toggle'顯示和隱藏元素... – Alnitak

同意@Alnitak。 – MacMac

公頃，你已經添加了相同的乾燥的東西，而我寫在我自己的答案相同：p – Alnitak

jQuery的構造可以採取第二個參數物種從所述元件開始搜索，因此你會使用：

jQuery('.content', this)

這比語義等同於（但短）：

jQuery(this).find('.content')

你應該考慮優化你的代碼，以避免選擇的不必要的重複和評估：

jQuery('.item').on('click', function() { 
    var content = jQuery('.content', this); 
    var display = content.css('display'); 

    if (display === 'block') { 
     display = 'none'; 
    } else if (display === 'none') { 
     display = 'block'; 
    } 
    content.css('display', display); 
}

或更好，但只要使用內置的jQuery方法用於切換元素的可見性，並獲得過場動畫（如果你要想讓他們）免費：

jQuery('.item').on('click', function() { 
    jQuery('.content', this).toggle(); 
}

來源

2016-04-29 08:58:00 Alnitak

使用$（本）中的if語句

回答

相關問題