如何有條件地jQuery切換並添加類名？

-1

我想要一個按鈕，點擊時確實會添加一個類名「in」，或者「in」已經存在將其刪除。如何有條件地jQuery切換並添加類名？

它確實添加了「in」類，但一旦設置了它，再次單擊時就不會將其刪除。

如何將「in」添加到類「collapse」中，並在再次單擊時將其刪除？

$(document.getElementById("toggle-expand-sections")).click(function() { 
 
    if ($('#toggle-expand-sections').hasClass("enabled")) { 
 
     $('#description-form .collapse').addClass("in"); 
 
    } else { 
 
     $('#description-form .collapse').removeClass("in"); 
 
     $('#toggle-expand-sections').addClass("enabled"); 
 
    } 
 
    $('#toggle-expand-sections .toggle').toggle(); 
 
    });

#toggle-expand-sections { 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t padding: 2rem; 
 
} 
 

 
.collapse { 
 
\t display: none; 
 
} \t 
 

 
.in { 
 
\t display: block !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/js/font-awesome.min.js" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="toggle-expand-sections" class="btn btn-info"> 
 
    <i class="fa fa-toggle-off toggle" title="expand all sections"></i> 
 
    <i class="fa fa-toggle-on toggle" style="display: none" title="collapse all sections"></i> 
 
</button> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">foo</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">bar</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">baz</div> 
 
</div>

來源

2017-07-28 Emily Jones

查找'.toggleClass（）';） –

您的代碼不起作用，因爲'$（ '＃切換-擴大截面'）addClass（「啓用」）'表示'hasClass（」啓用'）'將永遠是'真實' –

**簡短**瀏覽[文檔]（http://api.jquery.com）回答這個問題。發帖前請做調查。（實際上，花費一兩個小時閱讀這些API文檔開始結束是非常值得的。我學習jQuery的第一件事情之一是，它爲我節省了很多時間。） –

你肯定不知道.toggle()方法...
說明：顯示或隱藏匹配的元素。

看看它是如何減少你的代碼（以及錯誤的可能性，無論是邏輯還是合成）。

// Toggle "Expand/Collapse All Sections" Button 
 
$('#toggle-expand-sections').on('click', function() { 
 
    $(this).find('.toggle').toggle(); 
 
    $(".collapse").toggle(); 
 
}); 
 

 

 

 
/* 
 
    if ($('#toggle-expand-sections').hasClass("enabled")) { 
 
    $('#toggle-expand-sections').removeClass("enabled"); 
 
    $('.collapse').removeClass("in"); 
 
    } else { 
 
    $('.collapse').addClass("in"); 
 
    $('#toggle-expand-sections').addClass("enabled"); 
 
    } 
 
}); 
 
*/

#toggle-expand-sections { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    padding: 2rem; 
 
} 
 

 
.collapse { 
 
    display: none; 
 
} 
 

 
/* 
 
.in { 
 
    display: block !important; 
 
} 
 
*/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/js/font-awesome.min.js" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="toggle-expand-sections" class="btn btn-info"> 
 
    <i class="fa fa-toggle-off toggle" title="expand all sections"></i> 
 
    <i class="fa fa-toggle-on toggle" style="display: none" title="collapse all sections"></i> 
 
</button> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">foo</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">bar</div> 
 
</div> 
 

 
<div class="collapse"> 
 
    <div class="subheader-description">baz</div> 
 
</div>

來源

2017-07-28 14:54:51

爲什麼不使用jQuery的toggleClass方法？

$(function() { 
    $("#yourbutton").on("click", function() { 
     $("#yourelement").toggleClass("in"); 
    )) 
});

來源

2017-07-28 15:03:50

如何有條件地jQuery切換並添加類名？

回答

相關問題