無法將類切換爲元素

我的手風琴出現問題：我想在面板打開時jQuery向目標（元素）添加類expanded，當我點擊該元件時，當另一個面板打開時，它將刪除該類並添加它打開的另一個。
當我打開手風琴面板時，默認的引導程序功能會刪除collapsed類的a標記，當我關閉它時，它會再次添加它（collapsed類），我使用它來解決我的問題（我在上面的段落中進行了解釋）但我不能。
這裏是HTML的代碼。無法將類切換爲元素

<div class="panel-group" id="accordion"> 
    <div class="panel" > 
      <div class="panel-heading"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#html">HTML</a> 
      </div> 
      <ul id="html" class="panel-collapse collapse"> 
       <li><a class="a_nav" href="#">Tags</a></li> 
      </ul> 
     </div> 

     <div class="panel"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#css">CSS</a> 
      </div> 
      <ul id="css" class="panel-collapse collapse"> 
       <li><a class="a_nav" href="#">Bootstrap</a></li> 
      </ul> 
     </div> 
</div>

這裏是jQuery代碼

$(document).ready(function(){ 
     //add class to panel heading of sidebar for expanding 
     $("div.panel-heading").click(function (event) { 
       $target = $(event.target); 
       $target.addClass("expanded"); 
       if($("div.panel-heading a").hasClass("collapsed")) { 
        $(this).removeClass("expanded"); 
        //this line is for testing if the if condition even works 
       $(this).text("ok"); 
      } 
     }); 
});

來源

2016-09-16 Mohsen

我無法理解你的問題。 –

看起來您正在使用引導程序。如果那是真的，爲什麼不讓bootstrap爲你做這件事？另外，在你的問題中，你不是在說什麼是「問題」。 – Leeish

這似乎是你使用bootstraps面板是否有任何理由你沒有使用標準功能？如果你已經添加了庫，那麼不需要編寫你自己的jquery？ – namlik

您正在嘗試獲取事件目標，並且每次都將該類應用於事件目標或將其刪除。

正如一些用戶在我之前所說的，也許你應該讓bootstrap處理手風琴的功能。

但我會盡快回答你的問題。

您正在使用：

$("div.panel-heading").click(function (event) { ... });

所以你要點擊與類面板標題的DIV時執行的功能。

你做的函數內部：

$target = $(event.target);

要得到其中的單擊事件被解僱的目標元素。

現在看看你的HTML，我可以看到.panel標題div包含一個鏈接作爲一個孩子。

因此，如果您點擊鏈接或.panel標題div，event.target將成爲鏈接本身，如果您點擊div，則取決於您碰巧點擊的位置，該類將被添加到/從不同的元素中刪除。

這是要看的東西。也許不是event.target，你可以在你的事件處理函數中使用$（this）。

下面說，你的邏輯是錯誤的，因爲我們假設你addClass（「三品」），以正確的元素，那麼這樣的：

$("div.panel-heading a").hasClass("collapsed");

能不能看看元素的集合，所以即使第一鏈接沒有類，第二個鏈接可能有它，在這種情況下，if語句將評估爲true，並且之前添加的類將從調用事件處理程序的元素中移除。

爲了解決這個問題，我建議使用類似（如果你不想讓引導做的工作）：

$(".panel-heading").click(function() { 

    var $target = $(this); 

    //close all panels 
    $(".panel-heading").removeClass("expanded"); 
    $(".panel-heading a").addClass("collapsed"); 

    //open clicked one 
    $target.addClass("expanded"); 
    $("a", $target).removeClass("collapsed"); 

});

爲了更好的表現，我會緩存元素在使用的集合變量中的事件處理程序，以便每次發生點擊時不會重新計算它們。

來源

2016-09-16 17:43:51 klikas

我想這應該解決您的問題：

$('.panel-heading').click(function (event) { 
    $(this).toggleClass('expanded'); 
    $('.panel-heading a').toggleClass('collapsed'); 
});

見docs for toggleClass()。

來源

2016-09-16 17:10:29 thanksd

無法將類切換爲元素

回答

相關問題